0

Is it possible (how would I) to make a hover effect multiple elements at the same time differently?

Example. If I were to scroll over a link in a navbar is it possible to have the background of the link change colors while having an image (located somewhere else on the site) "tilt" at the same time. And vice versa so if I were to hover over the image the background of the link would change colors.

Here is the code in a fiddle: http://jsfiddle.net/P2CkK/

<body>
<div class="col3">
    <ul class="nav">
        <div class="about">
            <li><a href="#">About Us</a></li>
        </div>
        <div class="team">
            <li><a href="#">Our Team</a></li>
        </div>
    </ul>


<div class="col3 about">
    <img src="img/black.jpg" width="200px">
</div>
<div class="col3 team">
    <img src="img/red.jpg" width="200px">
</div>
Improve this question
2
  • This is usually possible in pure CSS, assuming the targeted elements share the same relative parent, or are at least direct siblings... else, JS would be needed to achieve anything CSS isn't capable of.
    – Josh Crozier
    Commented Nov 16, 2013 at 0:02
  • 1
    No, because you want to hover the links, and finding the images would involve traversing up through the parents of the a elements, and CSS has no parent-selector. This would require JavaScript.
    – David Thomas
    Commented Nov 16, 2013 at 0:04

2 Answers 2

Reset to default
2

Here is fiddle using your example, where you can toggle a class with jQuery for ease of use.

http://jsfiddle.net/P2CkK/6/

img.active {
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}

li.active {
    background: #BADA55;
}


$('a').hover(function() {
    $(this).parent().toggleClass('active'); //get the parent of the "a" your "li"
    $('img').toggleClass('active');
});

This is a very simple example, and should not be used in a production environment, more of proof of concept and a building block to expand on.

Improve this answer
0

Here is an approach (building on Ace's answer) that uses data attributes (less traversing) (demo)

<div class="col3">
    <ul class="nav">
        <div class="about">
            <li><a href="#" data-category='about'>About Us</a>
            </li>
        </div>
        <div class="team">
            <li><a href="#" data-category='team'>Our Team</a>
            </li>
        </div>
    </ul>
</div>
<div class="col3 about">
    <img src="http://www.placecage.com/c/200/200" />
</div>
<div class="col3 team">
    <img src="http://www.placecage.com/g/200/200" />
</div>

With this script:

$('a').hover(function () {
    var c = $(this).data('category');
    $('div.' + c + '>img').addClass('active');
}, function () {
    $('img.active').removeClass('active');
});
Improve this answer
2
  • Great example Jason! It seems he is a beginner to the land of jQuery so I wanted to show something extra simple.
    – Ace
    Commented Nov 16, 2013 at 0:56
  • I'm brand new to it, but using both of your answers has helped me figure it all out!
    – user2997985
    Commented Nov 16, 2013 at 12:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.