4

メニューホバーリンクに問題があります。私はメニューHTMLを持っています：

  <div class="menu">
            <ul id="nav">
                <li><div><a href="#">HOME</a> <div class="hover"></div></div></li>
                <li><div><a href="#">ABOUT</a><div class="hover"></div></div></li>
                <li><div><a href="#">PORTFOLIO</a><div class="hover"></div></div></li>
                <li><div><a href="#">SERVICE</a><div class="hover"></div></div></li>
                <li><div><a href="#">BLOG</a><div class="hover"></div></div></li>
                <li><div><a href="#">CONTACT</a><div class="hover"></div></div></li>
            </ul>
        </div>

CSS：

.menu {
    width: 950px;
    height: 50px;
    float: right;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    margin-top: 80px;
    border: 1px #FFF solid;
}

.menu #nav {
    list-style: none;   
}

.menu #nav li {
    display: inline-block;
    padding: 0px 30px 0px 30px;
}

.menu #nav li a {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
}

.menu #nav li a:hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    color: #ca6666;
}

.menu #nav li a .hover {
    display:none;
}


.menu li a:hover + .hover {
    background-image:url(images/hover.png);
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;  
    display: block;
    margin-top: -20px;
}

.clear {
    clear: both;
}

リンクを他のリンクから独立させたいです。たとえば、リンクにカーソルを合わせるとメニューが展開され、見栄えが悪くなります。メニューが展開されないときにホバーリンクを他のリンクから独立させたい。どうやってやるの？

4

3 に答える 3

5

要素を絶対的に配置.hoverして、ドキュメントフローから削除され、リンクのサイズに影響を与えないようにする必要があります。

もちろん、これは、親を比較的配置する必要があることを意味しますposition: relative。

[編集]：要素は要素の子ではない:hoverため、イベントがリンクでトリガーされると、ブラウザーで無限のホバーループが開始され、点滅します。<div class="hover"><a>

<div class="hover">つまり、次の代わりに、要素をリンクの子にすることをお勧めします。

<li><div><a href="#">HOME</a> <div class="hover"></div></div></li>

使用する：

<li><div><a href="#">HOME<div class="hover"></div></a></div></li>

そして、:hoverイベントには、直接の子孫セレクターを使用し>ます。これがあなたの問題を解決する最小限のCSSです（私が以下に投稿したFiddleリンクですべてを見ることができます）。

.menu #nav li > div {
    position: relative;
}
.menu #nav li a > .hover {
    display: none;
}
.menu #nav li a:hover > .hover {
    background: #333;
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;
    display: block;
    top: -20px;
    position: absolute;
}

ここで概念実証フィドルをチェックしてください-http://jsfiddle.net/teddyrised/e92Dj/

于 2013-03-24T11:32:02.687 に答える
1

私は.hover絶対ポジショニングを使用し、次に.menu #nav li（その親の）相対ポジショニングを与え、それ.hoverに応じてポジショニングしました。このホバーメニューがユーザーインタラクション（サブメニュー？）を目的としている場合.menu #nav li は、ホバー効果に使用する必要があります。a現在、ホバー領域として使用されているのは小さなテキスト領域だけであり、全体ではないためliです。

jsFiddle

ここに画像の説明を入力してください

（ブログは写真のホバー効果の後ろに隠されています）

私はこれらの変更を行いました：

.menu #nav li {   
    position:relative;
}
.menu li a:hover + .hover {
    position:absolute;
    left:100%;
    background-color:#F00;
    z-index:1;
}

アップデート

リンクの近くにホバー効果が必要だったので、ページを少しシャッフルしました。これがここにあります。.hoverアンカーの位置を基準にして配置するため、アンカーの内側にあることに注意してください。

jsFiddle

ここに画像の説明を入力してください

HTML

<li>
    <div>
        <a href="#">
            HOME
            <div class="hover"></div>
        </a> 
    </div>
</li>

CSS

.menu #nav li a {position：relative; } .hover {display：none; } a：hover .hover {background-image：url（images / hover.png）; background-position：center; 幅：96px; 高さ：33px; 色：＃ca6666; フォントの太さ：太字; 表示ブロック; マージントップ：-20px;

position:absolute;
left:100%;
background-color:#F00;
z-index:1;

}

于 2013-03-24T11:36:14.293 に答える
0

あなたはこれを試すことができます

<body id="Top">
<div class="menu">
           <ul id="nav">
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>HOME</a> <div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>ABOUT</a><div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>PORTFOLIO</a><div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>SERVICE</a><div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>BLOG</a><div class="hover"></div></div></li>
               <li><div><a href="#" onmouseover='document.getElementById("Top").src = "#link";'>CONTACT</a><div class="hover"></div></div></li>
           </ul>
       </div>
于 2020-05-10T16:37:38.773 に答える