Question

I have a listview that highlights a row when you mouseover it with the code below:

for TR:

<tr class="trAlt" onmouseover="over(this)" onmouseout="outalt(this)">

<script>
    function over(o) {
        if ('trClicked' != o.className)
            o.className = 'trOver';
    function outalt(o) {
        if ('trClicked' != o.className)
            o.className = 'trAlt';
   function clicked(o) {
        o.className = ('trClicked' == o.className) ? 'tr' : 'trClicked';
</script>

Now for one particular cell I need to set bgcolor based on the value it contains and I do it like so:

<td nowrap="nowrap" bgcolor='<%#Get_BGColor(Eval("Efficiency"),Eval("AvgAdjEfficiency"))%>'>
   <asp:Label ID="EfficiencyLabel" runat="server" 
       Text='<%# Eval("Efficiency") %>' />
</td>

Style tag:

<style>
       /* ItemTemplate TR background colour */
        .tr 
        {
            background-color:#222;
        } 
        /* AlternatingItemTemplate TR background colour */
        .trAlt
        {
            background-color:#595959;
        }
        /* When mouse is over TR background colour */
        .trOver 
        {
            background-color:#898989;
        } 
        /* When mouse click on TR background colour */
        .trClicked 
        {
            background-color:Red;
        } 
    </style>

The problem is that the cell above overwrites the bgcolor of that row when you mouseover (function over() above).

How can I make it so that when you mouseover it changes that cells bgcolor to the highlight color too, and then set it back (function outalt() above)?

Answer 1

You can use css

.trAlt:hover td{
   background: red;
}