0

我已经在论坛上搜索了几天，找到了与我的问题相近的答案，但没有一个能帮助我解决它。

有些话题与这个问题很接近，所以如果我重复一个问题，我很抱歉，但似乎没有人直接处理这个问题。

所以我在 a<div>中设置了一个简单的悬停<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 上时，您会得到第二个 div，它会为您提供几个链接，它基本上是一个下拉菜单。

在所有浏览器中，但 Safari（我从未与 safari 对抗）您可以将鼠标悬停在该区域上，它会停留并让您访问新链接。

但是在野生动物园中，它在您到达它们之前就关闭了。

我尝试将悬停添加到<a>and ，<li>但是它完全破坏了我的代码。

对此的任何启示都非常感谢！

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

干杯!

奈特~

4

2 回答 2

0

听起来您悬停的部分与与其连接的下拉菜单之间存在间隙。也许将顶部向上移动一点，然后添加一些额外的顶部填充以使其看起来相同？

于 2012-05-03T20:11:00.920 回答
0

尝试这个

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

在 Safari 窗口中为我工作

于 2012-05-03T19:00:45.027 回答