演示：jsFiddle

Question

我有一个由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：

#navigation 
    {
        width: 200px;
        font-size: 0.75em;
    }

#navigation ul 
    {
        margin: 0px;
        padding: 0px;
    }


#navigation li 
    { 
        list-style: none; 
    }

ul.top-level li 
    {
        border-bottom: #fff solid;
        border-top: #fff solid;
        border-width: 1px;
    }

#navigation a 
    {
        color: #fff;
        cursor: pointer;
        display:block;
        height:25px;
        line-height: 25px;
        text-indent: 10px;                  
        text-decoration:none;
        width:100%;
    }

#navigation li:hover 
    {
        background: #f90;
        position: relative;
    }

ul.sub-level 
    { 
        display: none; 
    }

li:hover .sub-level 
    {
        background: #999;
        border: #fff solid;
        border-width: 1px;
        display: block;
        position: absolute;
        left: 200px;
        top: -1px;
    }

ul.sub-level li 
    {
        border: none;
        float:left;
        width:200px;   
    }


#info1
    {
        font-family: "Verdana,Arial,Helvetica";
        size: -1;
        display: none;
    }


*/ I thought this might work*/
li:hover .top-level li:hover .sub-level  +  #info1
    {
        display: block;
    }

可以在http://jsfiddle.net/brisket27/C5Pn9/7/

查看代码

Answer 1

你无法使用CSS返回或遍历dom。 “CSS中没有父级选择器，即使在CSS3中也没有” 通过CSS-Tricks

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

演示：jsFiddle

$('.top-level li .sub-level li').on('mouseover', function() {
    // Position #info1 off to the side of the .sub-level    
    $('#info1').css({ 
        'top': $(this).parent('.sub-level').position().top,
        'left': $(this).parent('.sub-level').position().left + $(this).parent('.sub-level').outerWidth(),
    });

    $('#info1').show();
}).on('mouseleave', function() {
    $('#info1').hide();
});

当前代码将#info1放在子级别旁边。如果您希望#info1始终位于屏幕的绝对右侧，请移除js中的位置代码，然后将right: 0;应用于CSS中的#info1。

Answer 2

你的方法是正确的方向。我将尝试解释为什么这段代码不起作用 -

*/ I thought this might work*/
li:hover .top-level li:hover .sub-level  +  #info1 {
     display: block;
}

这是Adjacent sibling combinator，仅适用于“相邻”的兄弟姐妹。

在你的情况下，div＃info1在nav逻辑之外。如果要显示的div放在ul li的

之后，那么CSS规则将起作用

代表。 1）在下面的例子中，Div #one和#two是相邻的。

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

但下面提到的不是。

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

2）如上所述，这里

 <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 -->

和CSS规则，将工作！

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

说，我想你会更容易找到像jquery这样的选项来实现你的逻辑而不是CSS。

$(document).ready(function(){

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

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

Answer 3

使用以下代码段使用jquery进行悬停效果：

$(".sub-level>li").mouseenter(function() {
    $("#info1").show();
}).mouseleave(function() {
    $("#info1").hide();
});

要显示屏幕右侧的块，您可以使用：

#info1 { position: absolute; right:0; }

或

#info1 { float:right; }

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

3 个答案:

演示：jsFiddle