CODEWITHSUNDEEP
jquerycss
jmcclane
jmcclane

Reputation: 189

CSS disable hover temporarily

I've some a hrefs in a menu

<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>

The css for the hover effect is like this:

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

How can I disable the hover effect for one of the menu (list) items, e.g the for "Save to File"? I tried to put it in a 'disabled' class with:

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

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

But it doesn't work..... THX!

Upvotes: 0

Views: 1024

Answers (3)

Alex
Alex

Reputation: 9041

If you're concerned with browser compatibility

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

Upvotes: 2

Sid
Sid

Reputation: 801

Give your current save anchor css with !important

or

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

Upvotes: 1

Felix
Felix

Reputation: 38112

You can use :not pseudo-class:

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

Fiddle Demo

Upvotes: 2

Related Questions