0

私は数日間フォーラムを精査しており、私の問題に近い回答を見つけていますが、解決するのに役立つものはありませんでした.

一部のトピックはこの問題に近いため、質問を繰り返している場合は申し訳ありませんが、この問題を直接扱っている人はいないようです.

だから私は同じで別のものを表示するため<div>にaに設定された単純なホバーを持っています<li><div><li>

.flowerChoice { 
display: none;
width:100px;
height:100px;
position:relative;
top:-17px;
}

.flowerShow:hover   {
height:100px;
width:100px;
}

.flowerShow:hover   div.flowerChoice {
display: block;
}

次に、html

<ul id="navlist">
    <li class="" >
       <a href="store.html">
           <img src="./images/nav-spacer.gif" />
       </a>
    </li>
    <li>
         <div class="flowerShow">
             <a href="#">
                  <img src="./images/nav-spacer.gif" />
             </a>
             <div class="flowerChoice">
                 <img usemap="#flowerChoice" border="0" src="images/flowerChoice.png" />
                 <map name="flowerChoice">
                     <area shape="rect" coords="2,59,100,76" href="arrangements.html" alt="Flower Arrangements" />
                     <area shape="rect" coords="0,29,98,46" href="weddings.html" alt="Wedding Flower Arrangements" />
                 </map>
             </div>
         </div>
    </li>
    <li class="" >
        <a href="http://blog.passionflowerdesign.com/" alt="Passionflower Design Blog">
            <img src="./images/nav-spacer.gif" />
        </a>
    </li>
    <li class="" >
        <a href="contact.html">
           <img src="./images/nav-spacer.gif" />
        </a>
    </li>
</ul>

div の上にマウスを移動すると、いくつかのリンクを提供する 2 つ目の div が表示されます。これは基本的にドロップダウンです。

すべてのブラウザーで、ただし Safari (私はサファリと戦う必要はありませんでした) で、この領域にマウスを合わせると、そこにとどまり、新しいリンクにアクセスできます。

しかし、サファリでは、それらに到達する前に閉じます。

と にホバーを追加しよう<a>としました<li>が、コードが完全に壊れてしまいます。

これに光を当てていただければ幸いです。

http://www.thetclub.com/test/passionflower/www/index.html

乾杯！

ネイト〜

4

2 に答える 2

0

これを試して

.flowerShow:hover li {
height:100px;
width:100px;
}

サファリウィンドウで私のために働く

于 2012-05-03T19:00:45.027 に答える
0

ホバーした部分とそれに接続されているドロップダウンの間にギャップがあるように聞こえます。おそらく上部をもう少し上に移動しますが、上部のパディングを追加して同じように見えるようにしますか?

于 2012-05-03T20:11:00.920 に答える