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