CSS暂时禁用悬停

时间:2014-05-08 09:24:28

标签: jquery css3

我在菜单中有一些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!

3 个答案:

答案 0 :(得分:2)

您可以使用 :not 伪类:

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

<强> Fiddle Demo

答案 1 :(得分:2)

如果您关心浏览器兼容性

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

答案 2 :(得分:1)

使用!important

提供当前的保存锚css

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