Question

I have a problem with this code

<ul style="position: absolute; z-index: 999999999;">
    <li><a href="#" id="home_link">Home</a></li>
    <li><a href="#" id="hits_link">music</a></li>
    <li><a href="#" id="cinema_link">cinema</a></li>
    <li><a href="#" id="shows_link">shows</a></li>
    <li><a href="#" id="timeout_link">timeout</a></li>
    <li><a href="#" id="win_link">win</a></li>
  </ul>
<div id="logo"></div>

I need to change the background position of the div#logo when hover on any “a”

tried this CSS selector with no luck

ul li a#hits_link:hover + div#logo{background-position:-198px 0px;}

Please Advice

Answer 1

You can’t. There’s no selector that produces the behavior you want in CSS. Every CSS selector can only be used to affect an element and its descendants, not its siblings or any other totally unrelated element.

You’ll have to use jQuery/JavaScript for this.

Example:

$("ul li a").hover(function() {
    // When hovering, change the background-position of the #logo-element
    $("#logo").css("background-position", "-198px 0px");
},function() { 
    // When mouse moves away, revert the background-position
    $("#logo").css("background-position", "0px 0px");
});

I made you a fiddle. Treat it with care: http://jsfiddle.net/kMfWk/