触发 CSS：仅当悬停在边框上时才悬停答案

【问题标题】：Trigger CSS :hover only when hovering over border box触发 CSS：仅当悬停在边框上时才悬停
【发布时间】：2017-03-23 07:04:16
【问题描述】：

我正在创建一个矩形轮廓，在空的<div> 周围有一个5px 细边框。当用户将鼠标悬停在边框上时，我希望边框改变颜色。这一切都很好，但是当用户的鼠标在 <div> 内时，我不希望边框保持更改，因为它实际上不再在边框上。

在此处查看示例： https://jsfiddle.net/qbcc1trt/

.outer {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.myborder {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
  box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
}
.myborder:hover {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
  box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
}

<div class="outer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
  <div class="myborder"></div>
</div>

有什么方法可以做到这一点？

【问题讨论】：

如果没有 JavaScript，我认为这是不可能的
用JS怎么实现？
如果你用四个元素构建了一个正方形并让它们都在悬停时触发 w/CSS 怎么办？我从来没有见过这种类型的动作，你有在其他地方工作的例子吗？
@abagshaw 你真的需要阴影是透明的吗？如果没有，我有一个解决方案。
你对不同的html结构没问题吗？

标签： html css

【解决方案1】：

:hover 事件仅适用于最顶部的元素（以及内部的元素）。因此，您可以通过使另一个 div 的大小与您的 myborder 相同但减去边框的大小来实现此效果。然后直接放在myborder上面。

这样，悬停事件将在边框（在您的情况下为框阴影）而不是内部时触发。请看下面的演示

.outer {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.myborder {
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
  box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
}

.hover-cover {
  position: absolute;
  bottom: calc(5% + 5px);
  left: calc(20% + 5px);
  box-shadow: none;
  z-index: 1;
  width: calc( 40% - 10px);
  height: calc( 50% - 10px);
}
 

.myborder:hover {
  box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
}

<div class="outer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
  
  <div class="hover-cover"></div>
  <div class="myborder"></div>
</div>

【讨论】：

@Linek 没错，不过这个功能不用calc也能实现，我只是尽量保持原代码。
谢谢！这种兼容性对我来说很好。我实际上正在考虑做这样的事情。我会试一试。我之前没有采用这个想法的原因是我将动态创建一堆这些矩形，并且为每个框添加第二个 div 似乎有点臃肿，只是为了防止每个框触发悬停- 但是，它不使用 JS，所以这是一个加号
我认为你可以将多余的 div 换成 :before 属性
嗯..似乎没有与 :before 合作。它对你有用吗？
@KevinJantzer 实际上我找到了一个不使用 calc 而是使用 nth-child 的解决方案，它具有更好的兼容性但使用 2 个 div 而不是 1 个。

【解决方案2】：

我知道答案已被标记为已回答，但我找到了一个不使用calc 而是使用nth-child 的解决方案，它的compatibility table 比calc 更好。

.outer {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.myborder {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
}

.myborder div:nth-child(1) {
  box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.myborder div:nth-child(1):hover {
  box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
}

.myborder div:nth-child(2) {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
}

<div class="outer"><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
  <div class="myborder">
    <div></div>
    <div></div>
  </div>
</div>

【讨论】：

谢谢 - 虽然这看起来确实是一个更好的解决方案，但我认为它不适用于我的特定用例，因为我需要更改每个框的颜色，所以我猜nth-child 不行。
@abagshaw 您可以使用内部 div 的类来指定颜色。 nth-child 在这里不需要。
实际上再三考虑这可能会奏效 - 我会试一试并报告。

【解决方案3】：

与@Kevin提供的解决方案几乎相同：
https://jsfiddle.net/qbcc1trt/1/

这个想法是把两个元素，一个（B）放在另一个（A）之上，所以当用户:hover元素B时，他实际上不会:hover元素A。
您需要确保元素 B 不在元素 A 内

.outer {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.borderContainer {
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
}
.myborder {
  content: '';
  box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}
.inner {
  position: absolute;
  width: calc(100% - 5px * 2);
  height: calc(100% - 5px * 2);
  top: 5px;
  left: 5px;
  z-index: 100;
}
.myborder:hover {
  content: '';
  box-shadow: inset 0px 0px 0px 5px rgba(100, 200, 100, 0.6);
  width: 100%;
  height: 100%;
}

<div class="outer"><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">
<div class="borderContainer">
  <div class="myborder">
  </div>
  <div class="inner">
  </div>
</div>
</div>

注意我在这里使用了一个父容器（这可能更容易，取决于你的解决方案）。

【讨论】：