Question

我有一个菜单，其标题有图像，并且当图像不再悬停时会更改图像。但是，当我将鼠标悬停在其下方打开的子菜单上时，我希望它保持相同的图像，而不是恢复到其未被发现的状态。可以用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 &gt; 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>

Answer 1

嗯......我有一个特殊的技巧，我希望你喜欢它。我像这样制作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/

HTML / CSS：在菜单标题中保留悬停图像，同时在子菜单上悬停

1 个答案: