JavaScript 鼠标悬停在一个元素上以改变另一个元素的文字颜色

Question

我觉得我已经接近成功，但我对JavaScript还很陌生。请问以下代码有问题吗？我希望当您将鼠标悬停在“research_arrow”元素上时，能够更改“research_link”的文本颜色。

$(document).ready(function () {
  $(".research_arrow").hover(function () {
    $(".research_link").css("color:#ffffff");
  });
  $(".research_arrow").mouseleave(function () {
     $(".research_link").css("color:#000000");
  });
});

- Michael

---

尝试使用.css('color', '#fff')。 - brbcoding

Answer 1

您正在使用对象表示法，在这种情况下，您需要使用{}。

css({color:"#ffffff"});

或者，如果您只想设置一个属性：

css("color", "#ffffff");

- tymeJV

Answer 2

请尝试以下方法：

$(document).ready(function(){
  $(".research_arrow").hover(function() {
     $(".research_link").css("color", "#ffffff");
  }, function() {
     $(".research_link").css("color", "#000000");
  });
});

hover接受两个函数，一个类似于mouseover，另一个类似于mouseout。

- Remya Murali

Answer 3

hover应该接受两个函数作为参数，第一个是"mouseenter"函数，第二个是"mouseleave"函数。因此，你的函数应该改成这样:

$(".research_arrow").hover(function () {
    $(".research_link").css("color", "#ffffff");
}, function () {
    $(".research_link").css("color", "#000000");
});

或者只使用mouseenter和mouseleave事件：

$(".research_arrow").mouseenter(function () {
    $(".research_link").css("color", "#ffffff");
});
$(".research_arrow").mouseleave(function () {
    $(".research_link").css("color", "#000000");
});

- andi

Answer 4

试试这个...

$(document).ready(function () {
$(".research_arrow").hover(function () {
    $(".research_link").css("color","#ffffff");
});
$(".research_arrow").mouseleave(function () {
    $(".research_link").css("color","#000000");
});

- Soundar

Answer 5

这里有一个通用的演示/示例...

$('.foo').hover(function () {
    $('.bar').css('color', 'blue');
}, function () {
    $('.bar').css('color', 'black');    
});

或者使用一个对象...

$('.foo').hover(function () {
    $('.bar').css({'color': 'blue'});
}, function () {
    $('.bar').css({'color': 'black'});    
});

- brbcoding

---

这不会将颜色改回黑色。 - Mathias

我认为更通用的答案应该包括将第二个函数作为参数传递给hover()，以便改变颜色回来。 - Mathias