2

我有一个由 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/查看

4

3 回答 3

3

你不能用 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;在#info1CSS 中应用。

于 2013-11-12T16:08:08.380 回答
2

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

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

这是相邻兄弟组合器，仅适用于“相邻”兄弟。

在您的情况下， div #info1 在导航逻辑之外。如果您要显示的 div 放在 ul li 之后，您的 CSS 规则将起作用

例如。1) 在以下示例中，Divs #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();
    });
});
于 2013-11-12T16:58:13.590 回答
0

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

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

要在屏幕右侧显示块，您可以使用以下任一方法：

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

或者

#info1 { float:right; }

于 2013-11-12T16:18:32.103 回答