1

这是我的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");
});

但是当我将鼠标悬停在它不断显示和隐藏文本的图像上时会发生什么。我哪里出错了？

4

4 回答 4

3

您有一个非常常见的问题，当显示跨度时，鼠标不再位于 a 上方，因此调用了 mouseout 事件。

要解决此问题，请使用 mouseenter 和 mouseleave 事件

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

为你小提琴：D

并且，在 css 中，评论是 with/* */和 not with//

于 2012-06-21T02:30:05.087 回答
1

在您的 CSS 中：

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

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

它们必须/* */像这样包裹：

/* left padding is for the bg image to be visible */
于 2012-06-21T02:25:12.173 回答
0

您不需要（也不应该）使用 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/

于 2012-06-21T02:32:34.543 回答
0

尝试使用mouseleave。重新鼠标退出：

由于事件冒泡，这种事件类型会引起很多麻烦。例如，在本例中，当鼠标指针移出 Inner 元素时，将向该元素发送一个 mouseout 事件，然后向上传播到 Outer。这可能会在不合时宜的时候触发绑定的 mouseout 处理程序。请参阅 .mouseleave() 的讨论以获取有用的替代方法。

于 2012-06-21T02:34:51.947 回答