Question

目前，当您将鼠标悬停在蓝色框上时都会变为黄色，但当您将鼠标悬停在红色框上时，只会变为黄色。

当你将鼠标悬停在蓝色或红色上时，我需要将它们都变成黄色。

据我所知：

<!DOCTYPE html>
    <html>
        <head>
            <style> 

                #one {
                    background-color: blue;
                    width: 50px;
                    height: 50px;
                    float: left;
                }
                #two {
                    background-color: red;
                    width: 50px;
                    height: 50px;
                    float: left;
                    margin-left: 100px;
                }

                #two:hover {
                    background-color: yellow;
                }
                #two:hover ~ #one {
                    background-color: yellow;
                }

                #one:hover {
                    background-color: yellow;
                }
                #one:hover ~ #two {
                    background-color: yellow;
                }

            </style>
        </head>
    <body>
        <div id="one"></div>
        <div id="two"></div>
    </body>
</html>

Answer 1

这里是没有js的解决方案

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

JSFIDDLE

Answer 2

<强> Demo

就是这个

.container:hover div {
    background: yellow;
}

Answer 3

使用:before模拟悬停的div #one ...
HTML保持不变

DEMO

<强> CSS

#one {
    background-color: blue;
    width: 50px;
    height: 50px;
    float: left;
}
#two {
    background-color: red;
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 100px;
}
#one:hover, #one:hover ~ #two, #two:hover {
    background-color: yellow;
}
#two:before {
    content:'';
    display:none;
    width:50px;
    height:50px;
    margin-left:-150px;
    background-color: yellow;
}
#two:hover:before {
    display:block;
}

Answer 4

如果您希望悬停仅在儿童悬停时应用，则指针事件可以是一种方法： DEMO

你的CSS变得更像：

#one {
  background-color: blue;
  width: 50px;
  height: 50px;
  float: left;
}
#two {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 100px;
}

.parent {
  pointer-events:none;
  overflow:hidden;/* for float , for DEMO purpose to extend body or parent as there would be more content behind childs in real situation. */
}
.parent div {
  pointer-events:auto;
  cursor:pointer
}
.parent:hover div#one,
.parent:hover div#two
{
  background-color:yellow;
}

这是如何运作的？

pointer-events:none，杀死父级的鼠标事件。重置为孩子正常。

如果您将孩子悬停，则会悬停父母，并且可以应用CSS规则parent:hover。

当你将鼠标悬停在其中时，如何让两个盒子变成一种颜色？

4 个答案: