CODEWITHSUNDEEP
jquerycss
wyc
wyc

Reputation: 55273

How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

When I hover the h2 link, it turns green:

HTML:

<div class="project">
 <a rel="bookmark" title="Permalink to Taiwantalk" href="http://localhost/asylum/?p=6">
 <img class="attachment-post-thumbnail wp-post-image" width="278" height="128" title="taiwantalk_thumb" alt="taiwantalk_thumb" src="http://localhost/asylum/wp-content/uploads/2011/07/taiwantalk_thumb.png">
 </a>
 <h2>
 <a rel="bookmark" title="Permalink to Taiwantalk" href="http://localhost/asylum/?p=6">Taiwantalk</a>
 </h2>
 <p>Design, HTML, CSS, Wordpress</p>
</div>

CSS:

#showcase h2 a:hover {
  color: #682 !important; 
}

I would like the h2 to turn green when I hover the image link too.

I think jQuery is the way to go. Any suggestions?

Upvotes: 2

Views: 4572

Answers (2)

kojiro
kojiro

Reputation: 77107

a:hover+h2

will work in CSS[1]. Using it directly as a jQuery selector will work, but might be cumbersome just to apply styles. Here's how I might do it if I needed to support the CSS + selector:

...
<style type="text/css">
#showcase h2 a:hover,
#showcase a:hover+h2,
#showcase.colorme h2 { color: #682; }
</style>

<script type="text/javascript>
// onload or whatever makes sense:
$("#showcase>a").hover(
    function(){ $(this).parent().toggleClass("colorme"); },
)
</script>
...

[1] See http://www.quirksmode.org/css/contents.html for + selector compatibility

Upvotes: 3

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could do:

var colorSaved;
$('img').hover(function(){
    var link = $(this).closest('div.project').find('h2 a');
    colorSaved = link.css('color');
   link.css('color', 'green' );
},
function(){
     var link = $(this).closest('div.project').find('h2 a');
     link.css('color', colorSaved);
});

This saves the color of the link inside of the h2, switches the color to green on hover and then reverts the color to the one saved

i made this fiddle as example http://jsfiddle.net/nicolapeluchetti/gHjdy/ )it has a div with the text "hover test" instead of an image)

Of course if you have a lot of divs with the class project this code works for the relative h2. Look here http://jsfiddle.net/nicolapeluchetti/gHjdy/1/

Upvotes: 2

Related Questions