更改<a> when hover over </a>的链接颜色

Question

当我将鼠标悬停在<tr>上时，<a>元素的颜色应更改为白色。

我尝试使用类似的jQuery：

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

但这会更改所有<tr>的文字颜色。 有什么想法吗？

Answer 1

将此行添加到CSS文件中并忘记jQuery：

tr:hover a { color: white; }

如果你迫切希望你的jQuery代码能够工作，那么你需要只针对悬停行中的锚点：

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

Answer 2

有一些方法可以做。 .hover方法可以有两个功能（移动鼠标移动，移出鼠标），你可以实现两者来改变颜色，样本：

1 - 通过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');
    }
  );    
});

您可以使用.data('bgcolor')来获取样式attritbute或标签上设置的原始css设置的颜色。

2）或者只是添加一个css

.row {
   background-color: #000;
}

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

并将其设置在行

上

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

Answer 3

我不知道如果它与你的情况有关，我正在制作一个主要颜色的网站，其次是白色。每次刷新颜色都是随机的，所以我需要悬停元素来改变颜色。所以我最终得到了：

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

然后我只是将随机颜色分配给父元素：

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

Answer 4

我遇到了类似的问题;发现这个解决方案是有效的。

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