JQUERY、CSS，当鼠标悬停在 LI 上时会在其中显示 SPAN 标签吗？

Question

鉴于以下情况:

ul li .main .meta {opacity:0;}

<ul>
<li>  <span class="main">TITLE</span> <span class="meta">meta</span>  </li>
<li>  <span class="main">TITLE 2 </span> <span class="meta">meta</span>  </li>
<li>  <span class="main">TITLE 3</span> <span class="meta">meta</span>  </li>
etc... long list...
</ul>

我可以做什么样的 JQUERY 魔术，以便每当用户将鼠标悬停在 LI 中的任何位置时，具有类 = META 的 SPAN 更改为不透明度:1，并且当用户将鼠标移离 LI 时，LI 的元回到不透明度:0，新 LI 的元数据变为不透明度 1。等等....

谢谢!

Answer 1

这里有几个问题。最简单的实现是:

$("li").hover(function() {
  $(this).find("span.meta").stop().fadeIn();
}, function() {
  $(this).find("span.meta").stop().fadeOut();
});

这会起作用。问题是 span 是内联元素并且 fadeIn()会将其更改为 block 级元素。

注意:把stop()有一个好习惯要养成，否则如果您在同一个目标上快速发射多个动画，您可能会得到意想不到的效果。

你也可以用类来做到这一点:

$("li").hover(function() {
  $(this).find("span.meta").removeClass("hidden");
}, function() {
  $(this).find("span.meta").addClass("hidden");
});

与:

span.hidden { display: none; }

但是这样会失去淡入淡出效果。不过，它确实解决了 display: block 问题。

您也可以选择 animate() opacity 但 opacity 在 IE 上并不真正受支持。参见 opacity :

IE compatibility note

If you want opacity to work in all IE versions, the order should be:

.opaque {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
  filter: alpha(opacity=50);                    // second!
}

If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.

这段代码看起来像这样:

$("li").hover(function() {
  $(this).find("span.meta").stop().animate({opacity: 0.0});
}, function() {
  $(this).find("span.meta").stop().animate({opacity: 1.0});
});

您必须回答的一个问题是:您希望“元”内容不被呈现还是不可见？这是有区别的。不被渲染就像 display: none。不可见就像 opacity: 0 一样，这可能会使用户感到困惑，因为文本仍然可以选择。

恕我直言，我认为您最好接受显示的 block 性质或改用工具提示(即使是丰富的工具提示)。