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");
  });
});

Answer 1

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

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

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

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

Answer 2

试试这个，

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

悬停接受两个功能，如鼠标悬停和其他像鼠标一样。

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");
});

Answer 4

试试这个...

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

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