Javascript 当鼠标悬停在子级别项上时，如何在多级菜单外显示div_Javascript_Jquery_Html_Css

Javascript 当鼠标悬停在子级别项上时，如何在多级菜单外显示div

javascript jquery html css

Javascript 当鼠标悬停在子级别项上时，如何在多级菜单外显示div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个由HTML和CSS组成的菜单，我正在尝试获取它，这样一旦用户将鼠标悬停在菜单中的子级别项上，div info1就会出现在菜单的右侧。理想情况下，如果可能的话，我希望使用HTML和CSS来实现这一点，但是如果jQuery或JavaScript有一个更简单的修复方法，那也可以。我当然会感谢你的帮助以下是HTML： <body> <div id="navigation"> <nav> <ul class="top-level">

我有一个由HTML和CSS组成的菜单，我正在尝试获取它，这样一旦用户将鼠标悬停在菜单中的子级别项上，div info1就会出现在菜单的右侧。理想情况下，如果可能的话，我希望使用HTML和CSS来实现这一点，但是如果jQuery或JavaScript有一个更简单的修复方法，那也可以。我当然会感谢你的帮助

以下是HTML：

<body>
<div id="navigation">
<nav>
    <ul class="top-level">
      <li><a href="#">Top-level Item</a>
            <ul class="sub-level">
                <li><a href="#">Sub-level Item</a></li>
                <li><a href="#">Sub-level Item</a></li>
                <li><a href="#">Sub-level Item</a></li>
            </ul>
        </li>

        <li><a href="#">Top-level Item</a>
            <ul class="sub-level">
                <li><a href="#">Sub-level Item</a>
                <li><a href="#">Sub-level Item</a></li>
                <li><a href="#">Sub-level Item</a></li>
                <li><a href="#">Sub-level Item</a></li>
                   </ul>
           </li>    
</nav>
</div>

<div ID="info1">
    <center><img src="image.jpg" border="0" height=170 width=250 ></center><br><center><table BORDER=4 CELLPADDING=6 ><tr><td><br>I want this div to display on the right side of the screen once the mouse has hovered over a sub-level menu item.<br><br></td></tr></table></center>
</div>

</body>

代码可以在

上查看。您不能使用CSS返回或遍历dom“CSS中没有父选择器，即使在CSS3中也没有”via

您可以使用一些基本的jquery解决您的问题：

演示：

当前代码将

#info1

放在子级别旁边。如果您希望

#info1

始终位于屏幕的绝对右侧，请删除js中的位置代码，然后只应用

right:0到CSS中的#info1
。
使用jquery使用以下代码片段获得悬停效果：
$(".sub-level>li").mouseenter(function() {
    $("#info1").show();
}).mouseleave(function() {
    $("#info1").hide();
});

要在屏幕右侧显示块，您可以使用以下任一方法：
#info1{
位置：绝对；右侧：0；
}

或
#info1{
浮动：对；
}
您的方法方向正确。我将尝试解释为什么此代码不起作用-
*/ I thought this might work*/
li:hover .top-level li:hover .sub-level  +  #info1 {
     display: block;
}

这仅适用于“相邻”兄弟姐妹
在您的例子中，div#info1超出了导航逻辑。
如果要显示的div正好位于ulli的后面，那么CSS规则将起作用
例如。
1） 在下面的示例中，div#one和#two是相邻的
<div = "one">I</div>
<div = "two">II</div>

话虽如此，我想使用jquery这样的选项来实现逻辑而不是CSS会更容易
$(document).ready(function(){

    $('ul.sub-level li').mouseenter(function(){
        $('#info1').show();
    });

    $('ul.sub-level li').mouseleave(function(){
        $('#info1').hide();
    });
});

不要认为这会发生在CSS上。不过JS很简单（我在jQuery中做过）：CSS3中没有“我的父母的兄弟姐妹”选择器（但在CSS4中会有）。这里有一个css选项，您可以使用，但图像或文本将显示在nav not窗口的右侧。看看这个：：-dBaam，这是你的父选择器。并不是说任何浏览器都支持这一点，但唯一的说法“CSS中没有父选择器”是错误的，因为它位于CSS选择器级别4模块中：-D但这只是一点吹毛求疵，+1表示您的答案；）
<div = "one">I</div>
<div = "two">II</div>

<div = "cover">
    <div = "one">I</div>
</div>
<div = "two">II</div>

 <ul class="sub-level">
      <li><a href="#">Sub-level Item</a>
      </li>
 </ul>
 <div id="test">HERE IS A DIV</div>  <!-- This div is adjacent to ul -->

ul.sub-level:hover + #test {    /* This works because #test and ul.sub-level are adjacent*/
    display: none;
}

$(document).ready(function(){

    $('ul.sub-level li').mouseenter(function(){
        $('#info1').show();
    });

    $('ul.sub-level li').mouseleave(function(){
        $('#info1').hide();
    });
});