Question

假设我们有HTML：

<div id="wrapper">

     I want this to change color when button hovered

     <div class="button">Close</div>

</div>

我们可以在包装器悬停时更改元素的样式：

#wrapper:hover .button{
 color:red
}

现在想要相反的事情：

button:hover #wrapper{
 background:yellow
}

Answer 1

@丹;你可以用css这样做：

#wrapper{position:relative;}
#wrapper:hover .button{
 color:red;
}
.button:hover:after{
    content:"";
    background:yellow;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1
}

检查这个例子http://jsfiddle.net/sandeep/b6apC/。这是假的，但可以用css实现这个效果。

Answer 2

虽然如上所述，这个问题无法用CSS解决，但可以通过JavaScript实现（并且不需要库，例如jquery，mootools等）：

var b = document.getElementsByClassName('button');

for (i = 0; i < b.length; i++) {

    b[i].onmouseover = function() {
        this.parentNode.style.backgroundColor = '#f90';
    };
    b[i].onmouseout = function() {
        this.parentNode.style.backgroundColor = '#fff';
    };
}

JS Fiddle demo

<小时/> 的被修改

您还可以使用CSS3将淡入淡出应用于backgroundColor更改：

div[id^=wrapper] { /* other stuff */ -webkit-transition: background-color 0.5s linear; -moz-transition: background-color 0.5s linear; -o-transition: background-color 0.5s linear; }

JS Fiddle demo

Answer 3

如果你不介意文本的额外元素（这是最常见的），那么使用来自this answer的无耻和纯CSS1 解决方案，这将导致{{3} }：

标记：

<div id="wrapper"> 
    <span>I want this to change color when button hovered</span>
    <div class="button">Close</div> 
</div>

样式表：

#wrapper {position: relative}
#wrapper:hover {background: yellow}
#wrapper span:hover {background: white}
#wrapper span {display: block; padding-bottom: 1em}
#wrapper .button {position: absolute; bottom: 0}

Answer 4

这不能通过CSS来完成，但是通过Jquery ......这是一个解决方案！（未经测试，但理论在那里）

    <script type="text/javascript">
$(document).ready(function()
{
    $(".button").hover(function()
        {
            $(this).closest("#wrapper").stop().animate({"color": "#fff"}, "medium");
        },
        function()
        {
            $(this).closest("#wrapper").stop().animate({"color": "#000"}, "fast");
        }
    );

});
</script>

希望这会对你有所帮助。关键是“最接近”的位，它搜索结构以找到“包装器”的第一个实例，然后对其执行jquery魔术。

Answer 5

一般来说，CSS样式只能影响树下的事物 - 所以你不能影响包装器（基本上是这样）。

但是，您可以伪造它：您可能不关心包装元素是否会改变颜色，而是视觉外接块是否会改变颜色。这个外部块不一定需要是一个包装元素 - 事实上，如果你愿意更详细地控制布局，有几种可能的选择。

你可以制作“包装”和“按钮”的兄弟姐妹，然后使用#button:hover + #wrapper
您可以拥有一个与按钮大小不同的隐藏元素，并在其中包含包装和按钮 - 然后在其上声明悬停样式。
如果您只关心背景颜色，请使包装背景透明。然后，当按钮悬停时取消隐藏或生成具有较低z-index的大型彩色背景框。（你可以使用top，left等方便地定位这个新背景框，或者，如果由于其他定位而无法实现，只需将其设置为巨大且带有负边距并在包装中隐藏溢出）

最后一种方法特别有吸引力，因为它不需要手动定位按钮。然而，它也更受限制，因为确实影响周围的盒子;所以你只能改变背景颜色，而不能改变文本颜色。我在这里实现了一个示例：http://jsfiddle.net/emn13/xExvC/

CSS选择器：如何使元素悬停改变包装器的样式

5 个答案: