Question

我在div中有两个单词。其中一个词是黑色，另一个是灰色。当我将鼠标悬停在单词上时，我希望颜色可以交换，然后当我将鼠标悬停时再返回。

到目前为止，这是我的html标记：

<div class="splash_logo">
    <span class="paul">paul</span><span class="jones">jones.</span>
</div>

我的CSS：

.splash_logo {
position:relative;
font-family: Helvetica,Helvetica Neue,Arial,sans-serif;
font-weight:bold;
font-size:100px;
float:right;
margin-top:110px;
}
span.paul {
color:#222222;
}
span.jones {
color:#dedede;
}

最后我的悬停事件的jquery：

$(".splash_logo").hover(function(){
    $('span.paul').css("color", "#dedede");
    $('span.jones').css("color", "#222222");
});

当我将鼠标悬停时，这会改变颜色，但是，当我将鼠标悬停时，如何让它们更改？

Answer 1

使用:hover - CSS

DEMO:

span.paul:hover {
color:#dedede;
}
span.jones:hover {
color:#222222;
}

更新

.splash_logo:hover span.paul {
color:#dedede;
}
.splash_logo:hover span.jones {
color:#222222;
}

DEMO:

Answer 2

你可以将第二个函数传递给hover（）调用，当鼠标移出div时会执行。所以你可能想要这样的东西：

$(".splash_logo").hover(function(){
    $('span.paul').css("color", "#dedede");
    $('span.jones').css("color", "#222222");
}, 
function(){
    $('span.paul').css("color", "#222222");
    $('span.jones').css("color", "#dedede");
});

有关详细信息，请查看API文档：http://api.jquery.com/hover/

编辑：使用CSS可能会更好地实现您想要做的事情，正如其他人已经在答案中建议的那样。

Answer 3

您可以使用.on()方法为该范围添加事件处理程序。

$(".splash_logo").on("mouseenter", function(){
     $('span.paul').css("color", "#dedede");
     $('span.jones').css("color", "#222222");
});

$(".splash_logo").on("mouseleave", function(){
     $('span.paul').css("color", "red");
     $('span.jones').css("color", "green");
});

或类似的东西：

$(".splash_logo").mouseenter(function(){
   //your code here
}).mouseleave(function(){
   //your code here
});

或使用像kougiland回答的css方法。

您可以查看所有鼠标事件的列表here。

Answer 4

您可以按如下方式使用css :hover伪选择器：

.splash_logo:hover .paul{
  color:#dedede;
}
.splash_logo:hover .jones {
  color:#222222;
}

Answer 5

jQuery的 .hover（）可以将两个函数作为参数：

$("selector").hover(function1, function2);

当鼠标进入元素时调用Function1，在mouseleave上调用function2 =当悬停结束时。

jQuery在悬停时切换元素的颜色

5 个答案: