Html 触发器CSS：仅当悬停在边框框上时悬停

我正在创建一个矩形轮廓，在一个空的

周围有一个

5px

薄边框框。当用户将鼠标悬停在边框上时，我希望边框改变颜色。这一切都很好，但我不希望当用户的鼠标位于

内时边框保持更改，因为它不再实际位于边框上

请参见此处的示例：

.outer{
位置：相对位置；
溢出：隐藏；
显示：内联块；
}
我的边界{
内容：''；
位置：绝对位置；
底部：5%；
左：20%；
宽度：40%；
身高：50%；
方框阴影：插入0px 0px 0px 5px rgba（0,0,0,0.6）；
}
.myborder:悬停{
内容：''；
位置：绝对位置；
底部：5%；
左：20%；
宽度：40%；
身高：50%；
盒影：嵌入0px 0px 0px 5px rgba（1002001000.6）；
}

---

：悬停

事件仅对最上面的元素（以及其中的元素）起作用。因此，您可以通过使另一个div与

myborder

的大小相同，但减去边框的大小来实现此效果。然后将其直接放在

myborder

上方

这样，悬停事件将在边界上方（在您的案例中为框阴影）触发，但不会在内部触发。请参见下面的演示

.outer{
位置：相对位置；
溢出：隐藏；
显示：内联块；
}
我的边界{
位置：绝对位置；
底部：5%；
左：20%；
宽度：40%；
身高：50%；
方框阴影：插入0px 0px 0px 5px rgba（0,0,0,0.6）；
}
.悬停罩{
位置：绝对位置；
底部：钙（5%+5px）；
左：计算（20%+5px）；
盒影：无；
z指数：1；
宽度：计算（40%-10px）；
高度：计算（50%-10px）；
}
.myborder:悬停{
盒影：嵌入0px 0px 0px 5px rgba（1002001000.6）；
}

---

这几乎与@Kevin提供的解决方案相同：

这个想法是将两个元素，一个（B）置于另一个（A）之上，因此当用户将

：悬停
元素B时，他实际上不会
：悬停
元素A。

您需要确保元素B不在元素A内


.outer{
位置：相对位置；
溢出：隐藏；
显示：内联块；
}
.borderContainer{
位置：绝对位置；
底部：5%；
左：20%；
宽度：40%；
身高：50%；
}
我的边界{
内容：''；
方框阴影：插入0px 0px 0px 5px rgba（0,0,0,0.6）；
宽度：100%；
身高：100%；
}
.内部{
位置：绝对位置；
宽度：计算（100%-5px*2）；
高度：计算（100%-5px*2）；
顶部：5px；
左：5px；
z指数：100；
}
.myborder:悬停{
内容：''；
盒影：嵌入0px 0px 0px 5px rgba（1002001000.6）；
宽度：100%；
身高：100%；
}
我知道答案已标记为已回答，但我找到了一种解决方案，它不使用
calc
，而是使用
n个孩子
，它比


.outer{
位置：相对位置；
溢出：隐藏；
显示：内联块；
}
我的边界{
内容：''；
位置：绝对位置；
底部：5%；
左：20%；
宽度：40%；
身高：50%；
}
.myborder分区：第n个孩子（1）{
方框阴影：插入0px 0px 0px 5px rgba（0,0,0,0.6）；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
.myborder分区：第n个子项（1）：悬停{
盒影：嵌入0px 0px 0px 5px rgba（1002001000.6）；
}
.myborder分区：第n个孩子（2）{
位置：绝对位置；
顶部：5px；
右：5px；
底部：5px；
左：5px；
}

如果没有一些JavaScription，我认为这是不可能的。如何使用JS实现它？如果使用四个元素构建一个正方形，并使它们都在hover w/CSS上触发，会怎么样？我从来没有见过这种类型的动作，你有其他地方的例子吗？@abagshaw你真的需要阴影才能透明吗？如果没有，我有一个解决方案。你可以使用不同的html结构吗？@Linek true，但是这个功能可以在没有
calc
的情况下实现，我只是尽可能地维护原始代码。谢谢！这种兼容性对我来说很好。我真的在考虑做这样的事情。我来试一试。我以前没有使用这个想法的原因是，我将动态创建一组这样的矩形，并且在每个框中添加第二个div似乎有点夸张，只是为了防止每个框触发悬停-但是，嘿，它不使用JS，所以这是一个优点。我想你可以将额外的div替换为
：before
attributeHmm..似乎无法使用
：before
。它对你有用吗？@KevinJantzer事实上我找到了一个解决方案，它不使用
calc
，而是使用
nth child
，它具有更好的兼容性，但使用2个div而不是1个div。谢谢-虽然这看起来是一个更好的解决方案，但我认为它不适用于我的特定用例，因为我需要更改我猜每个框的第n个子项都不起作用。@abagshaw您可以使用内部div的类来指定颜色<代码>第n个孩子
在这里从来都不是必需的。事实上，经过再三考虑，这可能会奏效-我会给它一个机会，然后再报告。