CSS:将鼠标悬停在多个放置在另一个上的 div 上时显示样式

CSS: show style on hover over multiple divs placed one over another(CSS:将鼠标悬停在多个放置在另一个上的 div 上时显示样式)

问题描述

我有 2 个不同尺寸的 div 一个放在另一个上.所以有一个共同的交叉路口.两个 div 都有 CSS :hover 规则集.如果我将鼠标悬停在每个 div 上，则该规则适用.但是，如果我在交叉区域上移动，则只会启动顶部 div 悬停.

当鼠标悬停在交叉区域时，我希望 :hover 规则对两个 div 都起作用.

请参见

如果鼠标悬停在下图中的黑框上，则只有鼠标下方的单个 div 应显示其边框.

将 :hover 添加到包含 div (span) 中，而不是每个内部 divs;

.upper-layer {宽度:200px；高度:100px；背景颜色:红色；位置:绝对；左:20px；顶部:20px；}.下层{宽度:100px；高度:200px；背景颜色:蓝色；位置:绝对；}跨度:悬停 div {边框:纯色 2px 黑色；}

这是 Jsfiddle:双悬停

I have 2 divs of different dimension placed one over the other. So there is a common intersection area. There is CSS :hover rule set for both the divs. If I hover over each div then the rule applies. But if I move over the intersection area, only the top div hover is actuated.

When the mouse hovers on the area of intersection, I want the :hover rule to actuate for both the divs.

Please see example code at jsfiddle

On hover over the divs, the border shows up in black. I want both the div borders to show up when mouse hovers over the intersection area.

The same code is copy pasted below for reference:

HTML

<div class='lower-layer'></div>
<div class='upper-layer'></div>

CSS

.upper-layer {
  width: 200px;
  height: 100px;
  background-color: red;
  position:absolute;
  left: 20px;
  top: 20px;
}

.lower-layer {
  width: 100px;
  height: 200px;
  background-color: blue;
  position:absolute; 
}

.upper-layer:hover {
  border: solid 2px black;   
}

.lower-layer:hover {
  border: solid 2px black;   
}

UPDATE: To make the question more explicit. I want the border of both the divs to show up only when the mouse is within the green box in the image below

If the mouse is over the black boxes like in image below then only the individual div under the mouse should show its border.

Add :hover to your containing div (span) instead of each of the inner divs;

.upper-layer {
    width: 200px;
    height: 100px;
    background-color: red;
    position:absolute;
    left: 20px;
    top: 20px;
}
.lower-layer {
    width: 100px;
    height: 200px;
    background-color: blue;
    position:absolute;
}
span:hover div {
    border: solid 2px black;
}

Here's the Jsfiddle: Double Hover

这篇关于CSS:将鼠标悬停在多个放置在另一个上的 div 上时显示样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！