在一个 div 上使用 :hover 来影响另一个 div 的背景位置答案

【问题标题】：Using :hover on one div to affect the background-position of another div在一个 div 上使用 :hover 来影响另一个 div 的背景位置
【发布时间】：2012-06-24 21:38:11
【问题描述】：

我有一堆 div 一个一个叠放，它们设置为 position:absolute，都包含在一个容器 div 中。我想做的是当用户将鼠标悬停在#feature_1_hitbox 上时更改#feature_1_shade 的背景位置。我试图通过使用来实现这一点 -

#feature_1_hitbox:hover #feature_1_shade {
background-position: 0 0;
}

这不起作用。但是，如果我将它应用到容器 div 中，它确实有效：

#feature_1_container:hover #feature_1_shade {
background-position: 0 0;
}

我几乎可以满足于此，但我需要将 hitbox 设置为特定大小，因此 :hover 必须应用于我的 hitbox div。有什么理由为什么这适用于一个 div 而不是另一个？

这是标记代码：

<!-- container --> <div id="feature_1_container">
<!-- shade --> <div id="feature_1_shade"></div>
<!-- text and arrow --> <div id="feature_1_text_container"><h3 id="feature_1_arrow">Memberships</h3><p id="feature_1_text">Text here text here</p></div>
<!-- image --> <div id="feature_1_graphic"></div>
<!-- hitbox --> <a href="#"><div id="feature_1_hitbox"></div></a>

</div> <!-- #feature_1_container -->

这是 CSS：

#feature_1_container {
width: 289px;
height: 255px;
float: left;
}

#feature_1_hitbox {
width: 289px;
height: 166px;
margin: 89px 0 0 0;
position: absolute;
/* background-color: #F99; */
}

#feature_1_graphic {
width: 289px;
height: 255px;
position: absolute;
background-image: url(site_style_images/feature_1_memberships_bag.png);
}

#feature_1_text_container {
width: 289px;
margin: 100px 0 0 0;
position: absolute;
}

#feature_1_text {
margin: 0 0 0 100px;
}

#feature_1_arrow {
background-image: url(site_style_images/feature_arrows.png);
background-position: center right;
background-repeat: no-repeat;
height: 49px;
padding: 0 30px 0 100px;
margin: 0 22px 0 0;
color: #8d895c;
font-size: 22px;
line-height: 44px;
font-family: 'Quicksand', sans-serif;
font-weight: normal;
letter-spacing: -2px;
font-style: normal;
}

#feature_1_shade {
width: 289px;
height: 166px;
margin: 89px 0 0 0;
background-image: url(site_style_images/feature_1_shade.png);
background-position: 0 -166px;
position: absolute;
background-color: #CCC;
}

#feature_1_hitbox:hover #feature_1_shade {
background-position: 0 0;
}

【问题讨论】：

标签： css hover background-position

【解决方案1】：

按照该顺序使用 HTML 源代码，您必须使用 JavaScript 或 jQuery。 CSS 选择器不能向后引用更早的元素。

如果源顺序颠倒了，您也许可以执行以下操作：

#feature_1_hitbox:hover ~ a #feature_1_shade

如果 jQuery 是一个选项，您可以根据 #feature_1_hitbox 的 hive 状态向 #feature_1_shade 添加和删除一个类：

CSS

#feature_1_shade.on {...}

jQuery

$("#feature_1_hitbox").hover(
    function(){ $('#feature_1_shade').addClass('on'); },
    function(){ $('#feature_1_shade').removeClass('on'); }
);

等效的 JavaScript 是：

var obj = document.getElementById("feature_1_hitbox");
obj.onmouseover = function(){
    document.getElementById("feature_1_shade").className = "on";
}
obj.onmouseout = function(){
    document.getElementById("feature_1_shade").className = "";
}

注意：如果#feature_1_shade 使用任何其他类，则在使用纯 JavaScript 添加或删除类时必须小心。

【讨论】：

【解决方案2】：

它不起作用的原因是因为对于 CSS 选择器，#container:hover #shade{} 实际上在 ID #container 内设置 ID #shade。在您的标记代码中，#shade 嵌套在 #container 中，但不在 #hitbox 中。也许添加另一个“不可见 div”（不透明度：0），其大小和位置与 hitbox 完全相同，并在不可见 div 内包含阴影，然后使用悬停选择器设置不可见 div 的样式可能会起作用。示例：#invisible_hitbox_hover:hover #shade{}

【讨论】：