CODEWITHSUNDEEP
jqueryhtmlcss
Matt Schwarz
Matt Schwarz

Reputation: 5

Change background image after animation on hover of another element

I want to animate the logo above my nav if you hover over the li elements. The animation (an X flip) should reveal another logo based on the li being hovered on, then Xflip back to the original when no longer focused. The issue seems to be that the li's are buried in the nav + ul and the logo is in a div outside that scope and attached as a background image to the a (see below):

<section id="header">
            <div class="logo"><a href="/"></a></div>
            <nav>
                <ul>
                    <li><a class="a" href="#">Link 1</a></li>
                    <li><a class="b" href="#">Link 2</a></li>
                    <li><a class="c" href="#">Link 3</a></li>
                    <li><a class="d" href="#">Link 4</a></li>
                </ul>
            </nav>
</section>

I tried doing something like nav > ul > li:hover ~ .logo > a {..changebG..} but that wasn't working out. Is there a CSS way to go about this?

I also attempted JQuery, but am far less proficient in that.

Upvotes: 0

Views: 562

Answers (2)

Koen Peters
Koen Peters

Reputation: 12916

This cannot be done using only CSS3. CSS3 does not allow you to reference parent elements based on a hover of the child element. You'll need to use JavaScript for this.

Hopefully browsers will soon support the parent selector that is featured in the new CSS4 documentation

Upvotes: 0

davidpauljunior
davidpauljunior

Reputation: 8338

As others have said, you can't change the background of the logo when hovering on the list items.

However, an option may be to place a different logo over the top of the original one? This will only work in certain situations, such as if the logos are the same size and not transparent (so you can see the other logo below).

You can create a pseudo element on the <a> which changes opacity on hover, so it covers the original logo.

Basic Concept:

li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100px;
  height: 50px;
  opacity: 0;
}

li a:hover:before {
  opacity: 1;
}

li a.a:before {
  background: url("http://placehold.it/100x50/ff0000");
  top: 0;
}

li a.b:before {
  background: url("http://placehold.it/100x50/000000");
  top: 0;
}

li a.c:before {
  background: url("http://placehold.it/100x50/0066cc");
  top: 0;
}

li a.d:before {
  background: url("http://placehold.it/100x50/ffffcc");
  top: 0;
}

DEMO

Upvotes: 1

Related Questions