Question

我在菜单中有一些hrefs

<ul id="nav">
 <li>
  <a href="#">Project</a>
   <div class="subs">
    <div>
     <ul>
      <li>
   <h3>Save</h3>
    <ul>
         <li>
       <a id="save_canvas" href="#" class='disabled'>Save to File</a>
         </li>
     <li>
          <a id="save_canvas_as" href="#">Save as</a>
         </li>
       </ul>
     </li>
   </ul>
  </div>
 </div>
</li>

悬停效果的css是这样的：

#nav li ul ul li a:hover {
  background-color: #0060a6;
  color: #fff;
 }

如何禁用其中一个菜单（列表）项目的悬停效果，例如＆＃34;保存到文件＆＃34;？我试图把它放在一个“残疾人”中。上课：

disabled { 
  filter: alpha(opacity=30); 
  -moz-opacity:0.3; 
  opacity: 0.3;
}

.disabled a:hover{
   background-color: none !important;   
 }

但它不起作用..... THX！

Answer 1

您可以使用 :not 伪类：

#nav li ul ul li a:not(#save_canvas):hover {
    background-color: #0060a6;
    color: #fff;
}

<强> Fiddle Demo

Answer 2

如果您关心浏览器兼容性

#nav li ul ul li a.disabled:hover {
  background-color: *your default color*;
  color:  *your default color*;
}

Answer 3

使用！important

提供当前的保存锚css

或

nav li ul ul li a:not(#save_canvas):hover { background-color: #0060a6; color: #fff; }

CSS暂时禁用悬停

3 个答案: