1

私は、まさに私が望むように動作するポップアップ ナビゲーション メニューをホバリングしているサイトに取り組んでいます。メニューに加えて、ユーザーが現在ホバリングしている要素に関する特定の情報を含むページの別の場所に別のポップアップを表示する必要があります。ナビゲーション メニューのどの要素もホバーされていない場合は、ポップアップを非表示にします。

追加のポップアップ フィールドを除いて、必要なものがすべて含まれているjsFiddleがあります。

JavaScript ソリューションを除いて、考えられるすべてのことを試しました (私は JS に精通していないため) が、JS ソリューションは気にしません。私は JS をいじくり回して、ときどき変更を加えることはできますが、それを作成することはできません。

このホバリング ポップアップ メニューは機能します ( jsFiddleの完全な HTML と CSS )。

<ul>
    <li>Nav menu here
        <ul>
            <li>Sub menu items</li>
        </ul>
    </li>
    <li>More nav menu items</li>
</ul>

トップレベルのメニュー項目の 1 つにカーソルを合わせたときに、ホバリング要素に固有の関連情報を含む追加のポップアップ フィールドを取得するにはどうすればよいですか?

4

1 に答える 1

1

これがあなたが始めることができるものです。JavaScriptを使用して、情報を非表示および再表示できます。

このJSFiddleを確認してください：http：//jsfiddle.net/apD26/17/

サンプルJS：

    $(document).ready(function(){
        $('.info').hide();
        $('.parent').mouseover(function(){
            $('.info').show();
            $('.info').text($(this).attr('data-desc'));
        });  
        $('.parent').mouseout(function(){
            $('.info').hide();
        });        
    });

$(this).text()私がテキストを表示するために使用した代わりにdata、各メニュー項目の属性に説明を保存して表示することができます。

編集

JSFiddleを更新して回答

于 2012-11-30T18:14:41.167 に答える