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-Tricks経由の「CSSには親セレクターはなく、CSS3にもありません」

基本的な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 の位置コードを削除し、CSSに適用right: 0;するだけです。#info1

于 2013-11-12T16:08:08.380 に答える
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 に答える