Jquery 如何更改溢出：在列表中隐藏为可见，而不更改列表的高度

我正在尝试一种我在一些网站上看到的效果，比如alltop.com，那里有一个列表，当你将鼠标悬停在标题上（溢出设置为隐藏）时，你可以看到整个标题，而整个列表不会移动，如下所示：

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

以下是我尝试过的……以下是文本：

  <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鼠标悬停，并尝试将溢出更改为可见，然后获取下一项并将其隐藏，就像它在alltop.com上工作一样……不幸的是，我无法让它工作

有人知道你是怎么得到这个效果的吗？我是怎么修复代码的

---

谢谢

alltop.com上的效果不是用jQuery实现的-它是纯CSS。这是你的名片

所有

都将

位置：相对

和

高度

设置为一行文本的高度（本例中为1.25em）

中的所有
都有
位置：绝对
和
溢出：隐藏

悬停时，
获取
溢出：自动
，
高度：自动
和更大的
z索引
，因此它们呈现在以下列表项上方。它们也会有一个白色的背景来覆盖另一个项目。
alltop.com上的效果不是用jQuery实现的，它是纯CSS。这是你的名片

所有
都将
位置：相对
和
高度
设置为一行文本的高度（本例中为1.25em）

中的所有
都有
位置：绝对
和
溢出：隐藏

悬停时，
获取
溢出：自动
，
高度：自动
和更大的
z索引
，因此它们呈现在以下列表项上方。他们也有一个白色的背景来覆盖其他项目。
好的，我看过视频，我知道你想要实现什么，我不认为你的方法是最好的，但我可以帮助你修复代码

首先，标记，有3个li元素共享相同的id，一个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
});

希望这有帮助好的，我看过视频，我知道你想要达到什么，我不认为你的方法是最好的，但我可以帮助你修复你的代码

首先，标记，有3个li元素共享相同的id，一个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
});

希望这有帮助
“获取下一个项目并将其隐藏，就像它在alltop.com上工作一样”-在该网站上，下一个项目没有被隐藏，而是在当前项目扩展到多行显示长标题时被当前项目覆盖。顺便说一句，你应该使用
和
$（'.wrapper'）
，而不是使用
$（'[id^=wrapper]'）
创建具有重复id的无效html作为解决方法。“并将下一项隐藏起来，就像它在alltop.com上工作一样”-在该站点上，下一项不会被隐藏，当当前项目扩展为在多行上显示长标题时，它将被当前项目覆盖。顺便说一下，您应该使用
和
$（'.wrapper'）
，而不是使用
$（'[id^=wrapper]'）
创建具有重复id的无效html作为解决方法。您好……感谢大家帮助我理解这一点……我将尝试所有建议（都是为了学习如何做到这一点）但也在我的WP插件中使用它…再次感谢。嗨…感谢你们所有人帮助我理解这一点…我将尝试所有的建议（都是为了学习如何做到这一点），但也在我的WP插件中使用它…再次感谢。