Question

我的代码存在问题

<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>

当我将鼠标悬停在任何“a”

上时，我需要更改div＃徽标的背景位置

尝试了这个没有运气的CSS选择器

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

请建议

Answer 1

您根本无法做到这一点，因为#logo不是#hits_link的相邻兄弟。

我创建了一个小提琴here来证明邻近兄弟的意思。

#logo与#hits_link无关，所以AFAIK你需要js片段的帮助来做类似的事情。

使用JQuery ..你可以做类似的事情

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

这也是demo。

<强>更新在这种情况下，第二个功能是将背景位置恢复为0 0。

只使用它，如果你希望它保持这样

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

检查demo

Answer 2

你做不到。没有选择器可以在CSS中产生您想要的行为。每个CSS选择器只能用于影响元素及其后代，而不是它的兄弟或任何其他完全不相关的元素。

你必须使用jQuery / JavaScript。

示例：

$("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");
});

我让你成了小提琴。小心对待：http://jsfiddle.net/kMfWk/

我该如何使用CSS选择器来解决这个问题

2 个答案: