Question

这是我的html：

<div id="social">
    <a href="#" class="twitter"><span class="text">Twitter</span></a>
</div>

我打算做的最初是隐藏span.text，当我将鼠标悬停在div背景中的图像上时。这是我的css

#social a {
    display:inline-block;
    overflow:hidden;
    padding:4px 0 0 28px;
/* left padding is for the bg image to be visible*/
}
#social a span {
    display:none;
}
#social .twitter {
    background:url(../images/social/twitter.png) no-repeat left top;
}
#social .twitter:hover {
    background:url(../images/social/twitter_hover.png) no-repeat left top;
}

这是我的js：

$("#social a.twitter").mouseover(function(){
  $("span",this).show("slow");
}).mouseout(function(){
  $("span",this).hide("slow");
});

但是当我将鼠标悬停在图像上时，它会继续显示并隐藏文本。我在哪里出错？

Answer 1

你有一个非常常见的问题，当跨度显示时，鼠标不再是a，因此调用mouseout事件。

修复此问题使用mouseenter和mouseleave事件

$("#social a.twitter").mouseenter(function(){
  $("span",this).show("slow");
}).mouseleave(function(){
  $("span",this).hide("slow");
});

fiddle for you :D

并且，在css中，评论是/* */而不是//

Answer 2

在你的CSS中：

// left padding is for the bg image to be visible

//不是评论的有效符号。

它们必须包含在/* */中，如：

/* left padding is for the bg image to be visible */

Answer 3

您不需要（也不应该）使用javascript来实现此效果。你可以使用CSS，它更干净，更语义:)。例如：

a.twitter {
    display: block;
    width: 300px;
    height: 300px;
    background: url('http://www.simplyzesty.com/wp-content/uploads/2012/01/twitter_newbird_boxed_whiteonblue2.png');
}

a.twitter span {
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

a.twitter:hover span {
    opacity: 1;
}

jsFiddle：http://jsfiddle.net/Ut4Gx/

Answer 4

尝试使用mouseleave。重新删除：

此事件类型可能会因事件冒泡而导致许多令人头疼的问题。对于例如，当鼠标指针移出Inner元素时这个例子，一个mouseout事件将被发送到那个，然后涓涓细流到外面。这可以在inopportune中触发绑定的mouseout处理程序倍。有关有用的替代方法，请参阅.mouseleave（）的讨论。

jQuery鼠标悬停不按预期工作

4 个答案: