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

【问题标题】：jQuery toggle colors of element on hoverjQuery在悬停时切换元素的颜色
【发布时间】：2014-11-04 09:58:51
【问题描述】：

我在一个 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");
});

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

【问题讨论】：

你可以只用 CSS :hover 做到这一点，不需要 JS。
如果你只需要使用 jQuery，这就是 -> jsfiddle.net/aLk7x0k1

标签： jquery css colors hover

【解决方案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:

【讨论】：

好的，但是当你将鼠标悬停在 .splash_logo div 上时，我该怎么做，两种颜色都会改变？
@SamSkirrow - 像这样 -> .splash_logo:hover .paul { color:#dedede; }

【解决方案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 可能会更好地实现您想要做的事情。

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

jQuery 的 .hover() 可以接受两个函数作为参数：

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

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

【讨论】：