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

【问题标题】：CSS selectors: how to make element hovering change wrapper's styleCSS 选择器：如何使元素悬停更改包装器的样式
【发布时间】：2011-11-18 14:27:32
【问题描述】：

假设我们有 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
}

【问题讨论】：

这不能在 CSS AFAIK 中完成。不过，您可以使用 JavaScript 来实现。
你不能只使用纯 CSS 来做到这一点。您可能会在 [此处][1] 找到答案。 [1]：stackoverflow.com/questions/5797014/…
谢谢！我希望我的问题不完全重复
你可以在 CSS 中实现相同的视觉效果；请参阅下面的我或 sandeeps 的答案。

标签： css

【解决方案1】：

如果您不介意文本的额外元素（无论如何这是最常见的），那么请使用来自this answer 的 hackless 和 pure CSS1 解决方案，这会导致 this fiddle：

标记：

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

【讨论】：

【解决方案2】：

一般来说，CSS 样式只能影响树的下层——所以你不能影响包装器（基本上永远不会）。

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

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

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

【讨论】：

【解决方案3】：

@丹;你也可以像这样使用 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 实现该效果。

【讨论】：

感谢 Eamon Nerbonne；我总是首先喜欢css。 js 对我来说是第二个选择 :)

【解决方案4】：

虽然如前所述，这个问题不能用 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 对背景颜色更改应用淡入淡出：

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

【讨论】：

【解决方案5】：

恐怕这不能通过 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 魔术。

【讨论】：