Question

将鼠标悬停在另一个div上时，尝试更改div背景颜色。但我无法让它发挥作用。现在一直在看她，但找不到类似的问题。

<style type="text/css">
    #main {
        width: 960px;
        height: 600px;
        margin: auto;
        position: relative;
        background: red;
    }

    #trykk {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

    #trykk:hover #main {
        background-color: green;
    }
</style>

<div id="main">
    <div id="trykk">
    </div>
</div>

这就是我一直在使用的代码。唯一的问题是我不允许使用javascript。那么当我将鼠标悬停在div #trykk上时，有什么办法可以改变div #main的背景颜色吗？

Answer 1

与Rodik's答案相关的演示，因为他说你无法使用孩子改变选择父母，因此你无法改变父元素的风格，但如果你想要你可以改变你的标记，正如你所说的那样你不能使用javascript，但是如果你可以改变标记，那就像这样

Demo1

HTML

<div id="main">Main</div>
<div id="trykk">Trykk</div>

CSS

#main:hover + #trykk {
    background-color: green;
}

或者，如果您想要像现在一样嵌套div，只需像这样更改选择器

Demo2

HTML

<div id="main">Main
<div id="trykk">Trykk</div>
</div>

CSS

#main:hover > #trykk {
    background-color: green;
}

Answer 2

CSS选择仅适用于从父级到子级的一种方式。

因此，孩子的状态不会影响其父母的状态。

实现此类功能需要javascript mouseover个事件。

Answer 3

使用jquery你可以这样做：

$(function(){
    $("#trykk").hover(function(){
        $("#main").toggleClass("greenBackground");
    });
});

将鼠标悬停在另一个div上时更改另一个div背景

3 个答案: