悬停 LI 以显示 div

Posted 2023-05-08

【中文标题】悬停 LI 以显示 div

【英文标题】：Hover LI to show div

【发布时间】：2014-04-09 13:54:12

【问题描述】：

我在这里问了类似的问题，尽管我得到了一些答案，但我没能成功。 简而言之，我有一个这样的 UL 列表：

<ul class="productlist">
      <li><a href="#" id="link0" class="product-link">Caviar</a></li>
      <li><a href="#" id="link1" class="product-link">Athena</a></li>
      <li><a href="#" id="link2" class="product-link">Knot</a></li>
      <li><a href="#" id="link3" class="product-link">***e Leaf</a></li>
</ul>

请注意，我有 4 个 DIV。 除了第一个之外，所有这些都应该被隐藏，并且只有当用户将鼠标悬停在上面的 LI 链接上时才会打开。 所以，简而言之。用户来到页面，第一个链接被打开。他悬停在第二个上，第二个出现，第三个，第四个......

<div id="boxlink0">Some text for the first link</div>
<div id="boxlink1">Some text for the second link</div>
<div id="boxlink2">Some text for the third link</div>
<div id="boxlink3">Some text for the fourth link</div>

【问题讨论】：

如果这是一个导航菜单，通常 div 会进入 li 并绝对定位。如果你这样做，这可以通过 css 而不是诉诸 jquery 来完成

【参考方案1】：

试试这个简单的脚本：

var $boxes = $('.boxlink');
$('.productlist .product-link').mouseover(function() 
    $boxes.hide().filter('#box' + this.id).show();
);

为方便起见，我在所有 div 中添加了辅助类 boxlink。您还需要一点 CSS 来默认显示第一个 div：

.boxlink 
    display: none;

#boxlink0 
    display: block;

演示：http://jsfiddle.net/Vg4SH/

【讨论】：

嘿！老实说，非常感谢您的帮助。刚按照您的说明尝试过，但由于某种原因它不起作用...如果我给您发了一个链接让您看一下，会不会很粗鲁？ tinyurl.com/onhovershow 只显示第一个 div，但尽管我将 JS 包含在标题中，但它没有在悬停时显示其他...

你可以给我一个链接，当然。

谢谢你，再次抱歉让我感到无聊:)

你什么都没给我发，我怎么知道？

我的错，我确实将链接放在我之前的消息中，但也许你没有看到它。 tinyurl.com/onhovershow

【参考方案2】：

$(".productlist li a").hover(function(e)
    e.stopPropogation(); // to stop bubbling
    $("#box" +$(this).attr(id)).show();
)

【参考方案3】：

这样的事情应该可以完成工作。通常我会先回复看看你尝试了什么，但这很容易。

$(document).ready(function()
    $(".productList li").hover(function()
        $("#box"+$(this).attr("id")).show();
    ,function()
        $("#box"+$(this).attr("id")).hide();
    );
    $("#boxlink0").show();
    $("#boxlink1, #boxlink2, #boxlink3").hide();
);

【参考方案4】：

将所有 div 包装到一个包装器 div 中并最初应用 css 以仅使第一个 div 可见

<div id="wrapper">
  <div id="boxlink0">Some text for the first link</div>
  <div id="boxlink1">Some text for the second link</div>
  <div id="boxlink2">Some text for the third link</div>
  <div id="boxlink3">Some text for the fourth link</div>
<div>

CSS

#wrapper div

    display:none;

#wrapper div:first-child

    display:block;

然后使用 index() 属性检查哪个 li 已悬停，然后使用 jquery 显示相应的 div

$('ul li a').hover(function(e)
    var liNumber=$(this).parent('li').index();
    $('#wrapper div').css('display','none');
    $('#wrapper div:nth-child('+(liNumber+1)+')').show();
)

JSFiddle：http://jsfiddle.net/huF8Z/

【参考方案5】：

您不能使用hover 来影响不是悬停元素的后代或兄弟的元素。

但是你可以把你的 html 改成

<dl class="productlist">
    <dt><a href="#" id="link0" class="product-link">Caviar</a></dt>
    <dd id="boxlink0">Some text for the first link</dd>
    <dt><a href="#" id="link1" class="product-link">Athena</a></dt>
    <dd id="boxlink1">Some text for the second link</dd>
    <dt><a href="#" id="link2" class="product-link">Knot</a></dt>
    <dd id="boxlink2">Some text for the third link</dd>
    <dt><a href="#" id="link3" class="product-link">***e Leaf</a></dt>
    <dd id="boxlink3">Some text for the fourth link</dd>
</dl>

并使用

.productlist dd 
    display: none;

.productlist > dt:hover + dd 
    display: block;

Demo

如果您希望描述出现在所有定义的下方，您可以使用position: absolute 将它们放在底部：Demo

【参考方案6】：

查看工作Fiddle Here

首先将 css display none 应用于最后 3 个 div：

#boxlink1, #boxlink2, #boxlink3 
    display:none

然后写这个js代码：

$('#link0').hover(function()
    $('#boxlink0').css('display','block');
    $('#boxlink1, #boxlink2, #boxlink3').css('display','none');
);

$('#link1').hover(function()
    $('#boxlink1').css('display','block');
    $('#boxlink0, #boxlink2, #boxlink3').css('display','none');
);

$('#link2').hover(function()
    $('#boxlink2').css('display','block');
    $('#boxlink0, #boxlink1, #boxlink3').css('display','none');
);

$('#link3').hover(function()
    $('#boxlink3').css('display','block');
    $('#boxlink0, #boxlink1, #boxlink2').css('display','none');
);