0

我正在尝试做一些我在 alltop.com 等网站上看到的效果，其中有一个列表，当你将鼠标悬停在一个标题上（溢出设置为隐藏）时，你可以看到整个标题，而整个列表没有'不动，如可以在这里看到：

http://screencast.com/t/fK5n4X3Fg

（注意：在工具提示类型效果中显示内容还有另一种效果，但我对此不感兴趣 - 已经解决了这个问题）。

这是我尝试过的……这是文字：

  <div id="wprssmi_alltop_wrapper"><ul class="wprssmi_alltop_list"><li id="wrapper" ><h3    class="list_title"><a href="">BBC Sports Personality of the Year - live coverage</a></h3></li><li id="wrapper"><h3 ><a href="">Serious vulnerability reportedly leaves Samsung Galaxy S III and other devices wide open to malware</a></h3></li><li id="wrapper"><h3><a href="">Lanza’s body found with ammo for even more carnage</a></h3></li></ul></div>

这是jQuery

  jQuery('[id^=wrapper]').hover(function () {

    var cssObj = {
   'overflow': 'visible'
    }

   jQuery(this).css(cssObj);
  jQuery(this).next.hide();
 });

它本质上使用 jQuery 悬停在列表项上并尝试将溢出更改为可见并获取下一项并将其隐藏起来，就像它在 alltop.com 上工作一样......不幸的是我无法让它工作。

http://jsfiddle.net/amweiss/xFmsJ/9/

有谁知道你是如何获得这种效果的以及我如何修复代码？

谢谢

4

2 回答 2

2

alltop.com 上的效果不是用 jQuery 完成的——它是纯 CSS。这是您更新的 jsfiddle。

所有人<li>都具有position:relative并height设置为一行文本的高度（在他们的情况下为 1.25em）。

<h3>里面<li>都有position:absolute和overflow:hidden。_

在 hover、<h3>getoverflow:auto和height:auto更大z-index的情况下，它们会呈现在以下列表项的上方。他们还得到一个白色背景来覆盖其他项目。

于 2012-12-17T23:32:34.063 回答
1

好的，我已经看过视频，我知道你想要实现什么，我认为你的方法不是最好的，但我可以帮助你修复你的代码。

好的，首先，标记，你有 3 个共享相同 id 的 li 元素，一个带有 ID 的 jQuery 选择器只会返回第一个匹配的元素，所以不会返回你的所有 li 元素后。

只需将您的 ID 更改为类并做一个简单的jQuery('.wrapper')

对于第二件事，当您需要在 h3 上执行时，您正在应用溢出：在 li 元素上可见。

jQuery('.wrapper').hover(function(){
  // here jQuery(this) is returning the li, you need to find the h3
  jQuery(this).find('h3').css(cssObj);
});

在您的示例代码中，您忘记了下一个函数的 ()，这就是为什么不隐藏下一个 li 元素的原因。

jQuery(this).next().hide();

最后一件事，当你做悬停效果时，你可以设置两个功能，一个用于悬停，一个用于悬停

jQuery('.wrapper').hover(function(){
  // This will execute on the hover in
  jQuery(this).find('h3').css('overflow', 'visible');
  jQuery(this).next().hide();
}, function(){
  // This will execute on the hover out
  // Restore everything to default
});

希望这可以帮助

于 2012-12-17T23:34:44.297 回答