1

現在のコードについては、この PasteBin を参照してください: http://pastebin.com/3RtjYN00

現在、メイン画像にカーソルを合わせると、画像の背景位置が変わり、青いサブメニューが表示されます。

ただし、青いサブメニュー自体にカーソルを合わせると、画像は元のホバー以外の背景位置に戻ります。

サブメニューにカーソルを合わせると、画像が「ホバー」状態のままになるように、この問題を解決するにはどうすればよいですか?

4

3 に答える 3

1

余分なマークアップを追加する必要はありません。

変更するだけです:

#mega li a#ship span:hover {

に

#mega li:hover a#ship span {

実際の例: http://jsfiddle.net/tw16/fmNCz/

于 2011-09-05T21:20:01.777 に答える
0

メイン画像と青いサブメニューの周りに div ラッパーを追加します。ラッパーの :hover よりも、子のメイン画像の背景位置を変更し、青色のサブメニュー スタイルを表示するように設定します。

このようにして、青いサブメニューをホバーすると、画像は「ホバー」状態のままになります。

編集: css の最後の 2 行をそれらの 2 行に置き換えます。

#mega li a#ship span{background:url('http://indiawebsearch.com/files/image/thumb_googlelogo.jpg') no-repeat; position:absolute; width:100%; height:100%;}
#mega li:hover a#ship span{background-position:0 -59px;}

あなたの li をラッパーとして使用しましたが、私の側では問題なく動作しています。

于 2011-09-05T21:02:50.677 に答える
0

Mcgarriersの回答に基づいています。

このCSSを追加

.mega-wrap:hover>#mega li a#ship span {
background: url('http://indiawebsearch.com/files/image/thumb_googlelogo.jpg') 0 -59px no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

このHTMLを追加

<body id="home">
<div id="container">    
   <div id="top">&nbsp;</div>    
   <div id="middle">   
   <div id="nav"> 
   <div class="mega-wrap">
   <ul id="mega">
   <li><a href="/shipping/" id="ship" class="shipping-info"><span>     </span>Home</a> 
   <b class="s4"></b> 
   <div> <b class="s1"></b><b class="s2"></b><b class="s3"></b><br /><br />
   <p><a href="#">Test Link 1</a></p> 
   </div>
   </li>
   </ul>  
   </div>
   </div>  
   </body>

ただし、先に進む前に、html を修正することをお勧めします。

于 2011-09-05T21:16:43.817 に答える