CODEWITHSUNDEEP
jqueryhtmlcss
nidis
nidis

Reputation: 207

change link color of <a> when hover over <tr>

When I hover over <tr>, the color of the <a> element should change to white.

I tried with jQuery something like that:

<script>
    $('tr').hover(function(){
        $('a').css('color','white');
    });
</script>

But this changes the text color for all <tr>. Any idea?

html & css code:

Upvotes: 0

Views: 11694

Answers (4)

webgeek atlbike
webgeek atlbike

Reputation: 3

I was facing a similar issue; found this solution to be effective. 

     div.cntrblk tr:hover td a {
       color:rgb(0,0,255);
     }

Upvotes: 0

entio
entio

Reputation: 4273

I dunno if it would be relevant in Your case, i'm making website with one main color and second as white. Each refresh the color is randomized, so i needed hover elements to change color to this one. So i ended up with:

#menu-buttons>li{ color:#fff; }
#menu-buttons>li:hover { color: inherit; }

then i just assign randomized color to the parent element:

$('#menu-buttons').css('color',mainColor);

Upvotes: 0

Felipe Oriani
Felipe Oriani

Reputation: 38618

There are some ways to do. .hover method can have two functions (move mouse over, move mouse out) and you could implement both to change the color, for sample:

1 - by javascript (jquery)

$(document).ready(function(){
  $('tr').hover(
    function(){
      var $this = $(this);
      $this.css('background-color', '#fff');
    },
    function(){
      var $this = $(this);
      // original color -> $this.css('background-color', $this.data('bgcolor'));
      $this.css('background-color', '#000');
    }
  );    
});

You can use .data('bgcolor') to get the color is setted by the style attritbute or the original css setted on the tag.

2) Or just add a css

.row {
   background-color: #000;
}

.row : hover {
   background-color: #fff;
}

and set it on the row

<tr class='row'>
...
</tr>

Upvotes: 3

jeffjenx
jeffjenx

Reputation: 17487

Add this line to your CSS file and forget the jQuery:

tr:hover a { color: white; }

If you desperately want your jQuery code to work, then you need to target just the anchors inside your hovered row:

$('tr').hover(function(){
   $('a', this).css('color','white');
 });

Upvotes: 10

Related Questions