如何使用 CSS 选择器来解决这个问题 [重复]

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#logo 的背景位置

尝试了这个 CSS 选择器，但没有成功

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

请指教

Answer 1

您根本不能这样做，因为#logo 不是#hits_link 的相邻兄弟。

我创建了一个小提琴here 来演示相邻兄弟是什么意思。

#logo 与 #hits_link 没有任何关系，所以 AFAIK 你需要 js sn-p 的帮助才能做类似的事情。

使用 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/