Html 当您将鼠标悬停在两个框上时，如何使两个框变成一种颜色？_Html_Css

Html 当您将鼠标悬停在两个框上时，如何使两个框变成一种颜色？

html css

Html 当您将鼠标悬停在两个框上时，如何使两个框变成一种颜色？,html,css,Html,Css,当前，当您将鼠标悬停在蓝色框上时，两个框都会变为黄色，但当您将鼠标悬停在红色框上时，只有红色框会变为黄色当你悬停在蓝色或红色上方时，我需要它们都变成黄色就我所知： <!DOCTYPE html> <html> <head> <style> #one { background-color: blue;

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

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

就我所知：

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


#一个{
背景颜色：蓝色；
宽度：50px；
高度：50px；
浮动：左；
}
#两个{
背景色：红色；
宽度：50px；
高度：50px；
浮动：左；
左边距：100px；
}
#二：悬停{
背景颜色：黄色；
}
#二：悬停~#一{
背景颜色：黄色；
}
#一：悬停{
背景颜色：黄色；
}
#一：悬停~#二{
背景颜色：黄色；
}

这是一个没有js的解决方案

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

这是一个没有js的解决方案

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

使用

：before

模拟悬停的div

#one

。
HTML保持不变

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

使用

：before

模拟悬停的div

#one

…
HTML保持不变

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

就这个

.container:hover div {
    background: yellow;
}

就这个

.container:hover div {
    background: yellow;
}

如果您希望仅在子对象悬停时应用悬停，则指针事件可以作为一种方法：

您的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;
}

这是怎么回事

指针事件：无

，终止父节点上的鼠标事件。重置为正常，以切换到childs

如果将子对象悬停，则将悬停父对象，并且可以应用CSS规则

parent:hover

。

如果希望仅在子对象悬停时应用悬停，则指针事件可以作为一种方法：

您的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;
}

这是怎么回事

指针事件：无

，终止父节点上的鼠标事件。重置为正常，以切换到childs

如果将子对象悬停，则父对象将悬停，并且可以应用CSS规则

parent:hover

。

的可能重复。另一个有用的答案可能是为了选择以前的同级，您需要使用JavaScript。将它们放在同一个容器中并为此设置样式如何container@TylerH指针事件和鼠标悬停在这里很有帮助：，它甚至只在子事件发生时触发bg parenthovered@TylerH算了吧，这个问题与通过CSS升级DOM无关……可能是的副本。另一个有用的答案可能是为了选择以前的同级，您需要使用JavaScript。将它们放在同一个容器中并为此设置样式如何container@TylerH指针事件和鼠标悬停在这里很有帮助：，它甚至只在子事件发生时触发bg parenthovered@TylerH算了吧，这个问题与通过CSS爬升DOM无关。container:nth child（1）：hover div{background:yellow；}您可以避免使用：nth child（1），但只需使用。container:hover div{background:yellow；}@Alex您是对的，谢谢。如果#one，#two不浮动，则父级没有问题来包装它们，结果/效果不同：.container:nth-child（1）：hover-div{background:yellow；}您可以避免使用：nth-child（1），但仅此而已。container:hover-div{background:yellow；}@Alex您是对的，谢谢。如果#one，#two不浮动，父对象包装它们没有问题，结果/效果不同：但如果块需要自动移动？响应性或流体设计？但如果块需要自动移动？响应性设计还是流畅的设计？卓越，如何在基本CSS规则上大做文章，让每个人都认为它不可能是这样；）+1当然是Xelent，如何在基本CSS规则上大做文章，让每个人都认为它不可能如此；）+1当然可以