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的元回到不透明度：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，但IE上并不支持opacity。见opacity：

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一样，可能会使用户感到困惑，因为文本仍然可以选择。

恕我直言，我认为你最好不要接受显示器的块性质或使用工具提示（甚至是丰富的工具提示）。

Answer 2

像这样：

$('li').hover(
    function() { $('span.meta', this).show(); },
    function() { $('span.meta', this).hide(); }
});

顺便说一句，在CSS中隐藏元素的正确方法是使用visibility: hidden（如果你想占用空间）或display:none（如果你不想占用它）空间）

Answer 3

$('ul li.main').mouseover(function(evt){ $(this).find('span.meta').show(); });

我想......

Answer 4

最简单的实现是纯粹的CSS;

ul li .meta {opacity:0;}
ul li:hover .meta {opacity:1;}

它不会做任何淡入/淡出效果，但它可以达到你的目标。使用显示或可见性，取决于您是否希望文本在不可见时影响页面布局，从浏览器支持的角度来看，可能需要不透明度。

JQUERY，CSS，当在LI上面显示一个SPAN标签时？

4 个答案: