html - 触发 CSS :hover only when hovering over border box

Question

我正在创建一个带有 5px 的矩形轮廓空周围的细边框框 <div> .当用户将鼠标悬停在边框上时，我希望边框改变颜色。一切正常，但我不希望当用户的鼠标位于 <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>

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

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