Effect A Class From Rollover Of Another

[glenelkins]

Hi

 

Lets say i have a nav item like this:

 

.navitem a { display:block; text-indent:-3000px; overflow:hidden; width: 100px; height: 30px; background: url('../images/nav/test.png') no-repeat; }
    .navitem a:hover { background-position: -100px; }
    .navitem span { position: absolute; margin-top: 10px; margin-left: 10px; color: red; }

<div class="navitem"><span>TEXT HERE</span><a href="">Link Item</a></div>

 

How can i make it so when the link background image is hovered over, the text colour outside of the link changes too? When rolling over all this will do is pick the .navitem a:hover class and scroll the background image...im not sure how to make the text in the <span> change

 

The span needs  to be outisde the <a> for a reason!

[rhodesa]

with just CSS and working on all browsers...you can't. CSS3 has a standard for CSS selectors that will support this, but it's not widely used yet. you will have to use JS to accomplish this

[glenelkins]

bugger! i dont really fancy using javascript for it...but looks at though may need to be done...i think jquery would work best really!

[rhodesa]

yes...jQuery would be simple:

$('.navitem').hover(
  function(){
    $(this).addClass('hover');
  },
  function(){
    $(this).removeClass('hover');
  }
);

.navitem.hover span { color: blue; }

[glenelkins]

its all good! cheers mate. safe!