jQuery: Swap Parent Background Out When Hover Over Child

Swap to be done with a transition

[nigassma]

I have two transparent images for this navigation. The first is the off state of the nav that contains just the logo. The "rollover" state activates an extension of the logo, but since the two graphics are transparent the overlap is visible.

So to solve the problem I thought I would tackle it by replacing the "off" state background image with an "extended" state background image.

<div id="logo">
 <div id="nav">
 <ul class="tabs">
 <li class="lets hasmore"><a href="#"><span>Lets</span></a>
<ul class="dropdown">
  <li><a href="#">How We Work</a></li>
  </ul>
</li>
<li class="getto hasmore"><a href="/?page_id=6"><span>Getto</span></a>
  <ul class="dropdown">
  <li><a href="#">Contact</a></li>
  <li><a href="#">Locate</a></li>
  </ul>
  </li>
  <li class="work hasmore"><a href="/?page_id=5"><span>Work</span></a>
  <ul class="dropdown">
  <li><a href="#">Case Studies</a></li>
  <li><a href="#">Portfolio</a></li>
  </ul>
  </li>
 </ul>
 </div>

$('#nav li a').hover(
function(){
$('#logo').stop().fadeTo("slow", 0.0);
},
function(){
$('#logo').stop().fadeTo("slow", 1.0);
});

There are two problems with this method.

1) I don't know how to swap the parent with a transition effect.

2) Once I hover over one dropdown, I'd like the "extended" background to stay "on" until I roll off of the entire #logo div.

[lexipixel]

Maybe if you setup the image files as backgrounds in your CSS, e.g.-

.logo1 { background: url(logo1.png); }
.logo2 { background: url(logo2.png); }

Then use

$("#logo").addClass("logo1").removeClass("logo2");

- and -

$("#logo").addClass("logo2").removeClass("logo1");

Or, same idea, but maybe slicker, try logic with .hasClass() or use .toggleClass()

[nigassma]

Great, I'll give this a try.