how can I use the CSS selector to solve this

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

Starx · Answer 1 · 2012-02-01T07:58:16.343

You simply cannot do that, because #logo is not an adjacent sibling to #hits_link.

I have created a fiddle here to demonstrate what do you mean by adjacent sibling.

#logo is not related to #hits_link in any way, so AFAIK you will need the help of a js snippet to do something like that.

Using JQuery.. you can do something similar to this

$("#hits_link").hover(function() {
    $("#logo").css("background-position", "-198px 0px");
},function() { 
    $("#logo").css("background-position", "0px 0px");
});

Here is a demo to that as well.

Update: On that case, the second function is reverting the background position to 0 0.

use only this, if you want it to stay like that

$("#hits_link").hover(function() {
    $("#logo").css("background-position", "-198px 0px");
});

Check demo

but I have problem if I used this code which is I already use this function: `$("a#hits_link").click(function () {$("div#logo").css("background-position","-189px 0");)}` so when I hover on another one it will back to background-position", "0px 0px — Mohammad Ereiqat, Feb 01 '12 at 07:48

Andreas Eriksson · Accepted Answer · 2012-02-01T07:50:39.560

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/

edited Feb 01 '12 at 07:50

answered Feb 01 '12 at 07:38

Andreas Eriksson

8,979
8
47
65

OMG, there is "+" in CSS. Google CSS adjacent selector. – Starx Feb 01 '12 at 07:45
but I have problem if I used this code which is I already use this function: `$("a#hits_link").click(function () {$("div#logo").css("background-position","-189px 0");)}` so when I hover on another one it will back to background-position", "0px 0px – Mohammad Ereiqat Feb 01 '12 at 07:45
Actually, [read this](http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors) – Starx Feb 01 '12 at 07:46
Dear god i actually forgot about that one. Thanks. – Andreas Eriksson Feb 01 '12 at 07:50
Since, you edited, I will remove my downvote as well. But, Please research before you answer randomly. – Starx Feb 01 '12 at 07:54
@MohammadEreiqat: No, it won't, because the onMouseOver-event will just set the background-position to -198px 0px. It isn't until you mouse out that the background-position is reverted. And why do you have a second function specifically for the link with id "hits_link"? And clicking? I thought you wanted the background-position to move when _hovering_ over _any_ of the links? – Andreas Eriksson Feb 01 '12 at 07:54
Better would be to `bind` the events `mouseover` and `mouseout` for each element – Jannis M Feb 01 '12 at 09:41
How so? `.hover()` binds `mouseenter` and `mouseleave` which are a lot less fiddly to work with than `mouseover` and `mouseout`, which go crazy if you bind them on elements with descendants etc. – Andreas Eriksson Feb 01 '12 at 10:29

how can I use the CSS selector to solve this

2 Answers2