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中的AnyWhere上时,具有class = META的SPAN,更改为Opacity:1,并且当用户将其鼠标移离LI时,LI的meta将返回到不透明度:0,新LI的元素去Opacity 1.等....

谢谢!

Answer 1

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

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

这将是一种工作.问题是跨度是内联元素,fadeIn()并将其更改为块级元素.

注意: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上并不支持.见不透明度:

IE兼容性说明

如果您希望不透明度适用于所有IE版本,则顺序应为:

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

如果你不使用这个命令,IE8-as-IE7不会应用不透明度,虽然IE8和纯IE7一样.

这段代码看起来像这样:

$("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因为文本仍然可以选择,因此可能会使用户感到困惑.

恕我直言,我认为你最好不要接受显示器的块性质或使用工具提示(甚至是丰富的工具提示).