Question

我正在开发一个Web应用程序，我在HTML表中有一个表...

<table class="alphabet">
     <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
     </tr>
</table>

当我将鼠标悬停在每个字母上时，我需要更改文字颜色，我有以下代码可以正常工作：

$(document).ready(function() {
     $(".alphabet td").hover{
          function(){
               $(this).css('color', 'yellow');
          }, function(){
               $(this).css('color', 'white');
          }
     }
}

我需要实现另一个功能，当我点击字母时，字母的颜色会发生变化。问题是我尝试了.click（）但它没有用。颜色是无关紧要的，但我要说它需要它是红色的。

为了增加复杂性，让我们说如果我点击字母（将其改为红色），当我将鼠标悬停在字母上时它应该变为黄色，但是在离开时，它应该变回红色，而不是白色。 / p>

我不是要求有人实现它，我只需要知道要调用什么方法，比如.hover（）或.click（）等等...先谢谢了！

更新：我需要在这个项目中使用jQuery。我需要使用它因为我需要做更多然后只是改变颜色，我用颜色作为例子。

Answer 1

使用jQuery你应该使用$（selector）.click（）和$（selector）.css（{}）。

如果您无法更改颜色，请使用浏览器的CSS继承检查器查看其他内容是否覆盖它。

另外，你有没有尝试过CSS pseudoclass：hover？

e.g。

.myclass {
    color: red;
}
.myclass:hover {
    color: blue;
}

Answer 2

你的悬停功能是错误的，你正在使用.hover {}，所以你需要使用.hover（）代替我设置一个标志来检查是否点击了这个td并且如果点击了它仍然是颜色红色：

var flag = false;
$(".alphabet td").hover(
          function(){
               $(this).css('color', 'yellow');
          }, function(){

              $(".alphabet td").click(function(){
                  $(this).css('color','red');
                  flag = true;
              });
              if(flag == false){
               $(this).css('color', 'white');
              }
          }
     );

fiddle

jQuery单击文本

2 个答案: