0

我有一个菜单，它的标题有一个图像，当它不再悬停时会更改图像。但是，当我将鼠标悬停在其下方打开的子菜单上时，我希望它保持相同的图像，而不是恢复到未悬停的状态。这可以用 HTML/CSS 完成吗？

这是CSS代码：

ul#nav {
  margin: 0 0 0 0px;
}

ul.drop a {
  display:block;
  color: transparent;
}

ul.drop, ul.drop li, ul.drop ul {
  list-style: none;
  margin:  0;
  padding: 0;
  border: 0px solid #fff;
  background: transparent;
  color:      transparent
}

ul.drop {
  position: relative;
  z-index: 597;
  float: left;
}

ul.drop li {
  float: left;
  line-height: 1.3em;
  vertical-align: middle;
  zoom: 1;
}

ul.drop li.hover, ul.drop li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
  background: transparent;
}

ul.drop ul {
  display:none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
  background: transparent;
  border: 0px solid #fff;
}

ul.drop:hover ul {
  display:block;
}
ul.drop ul li {
  float: none;
}

ul.drop ul ul {
  top: -2px;
  left: 100%;
}

ul.drop li:hover > ul {
  visibility: visible
}

这是HTML

<ul class='drop' id='nav' style='padding-bottom:8px;'>
  <li><img alt='Share' border='0' onmouseout='this.src=&apos;normal.png&apos;' onmouseover='this.src=&apos;hovered.png&apos;' src='normal.png' style='padding:0px; margin:0px;'/>
    <ul>
      <li style='background-color:#202020;width:160px;padding:0px; margin:0px;'>
         <!-- Share Buttons -->
      </li>
    </ul>
  </li>
</ul>
4

1 回答 1

0

嗯..我有一个特别的技巧给你，希望你喜欢。我制作这样的HTML：

<ul id="nav" class="drop">
    <li class="icon1">HOVER ME
        <ul>
            <li> <a href="#" onclick="alert('Iam clicked')">HIDDEN MENU</a> </li>
        </ul>
    </li>
    <li class="icon1">HOVER ME 2
        <ul>
            <li> HIDDEN MENU </li>
        </ul>
    </li>
</ul>

和像这样的特殊css技巧：

...
    ul.drop li.icon1{
        background: url(YOUR_IMAGE) no-repeat left top;
        width: 140px;        
    }
   ul.drop li.icon1:hover{
        background: url(YOUR_IMAGE_HOVER) no-repeat left top;
    }
...

这里的演示：http: //jsfiddle.net/CsV7a/

于 2013-03-27T04:54:14.657 回答