CODEWITHSUNDEEP
javascriptjquerycsshover
Lieutenant Dan
Lieutenant Dan

Reputation: 8294

hover over one element (....trigger hover for different element)

<div id="bos_hero" class="clearfix">
    <a href="#" target="_blank"><span></span></a>
    <a href="#" target="_blank" class="rules" style="color:#fff !important;font-family: arial;"><b><u>Official</u></b></a>
    <div class="greybar">Have you seen my baseball?</div>.
    </span>
</div>

I have the above: the 'bos_hero' basically wraps the whole area as a button. However class="rules" is also a hyper link nested within. bos_hero and .rules has a hover effect (basically just growing in size by 1-2px; I would like to trigger '.rules' hover event to go off whenever bos_hero does.

Below was my current approach; but didn't work absolutely at all -- any ideas?

$('#bos_hero').hover(function() {
   $('a.rules:link').css('font-size','11.5px');
);

Upvotes: 1

Views: 73

Answers (2)

Ori Drori
Ori Drori

Reputation: 193250

You can do it using css only:

#bos_hero:hover > .rules {
font-size: 11.5px;
}

Upvotes: 3

tobinfekkes
tobinfekkes

Reputation: 69

Just a couple quick things that might help you get to the bottom of it..

  1. Close your .hover() function. Developer Tools in the browser will flag it for you, it needs a closing "}" bracket on line 3: ");" becomes "});"

  2. When using .css() parameters with dashes, use quotes ("), not apostrophes (')

    $('#bos_hero').hover(function() {
   $('a.rules:link').css("font-size",'11.5px');
});

Upvotes: 0

Related Questions