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

Question

<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');
);

Answer 1

You can do it using css only:

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

Answer 2

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'); });