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

概述我正在创建一个矩形轮廓,在空的< div>周围有一个5px细边框.当用户将鼠标悬停在边框上时,我希望边框改变颜色.这一切都运行正常,但我不希望当用户的鼠标位于< div>内时边框保持更改状态.因为它不再实际上在边境上. 在这里查看示例： https://jsfiddle.net/qbcc1trt/ .outer { position: relative; overflow: hidden; 我正在创建一个矩形轮廓,在空的< 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.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 ><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg">  <div ></div></div>

有没有办法实现这个目标？

解决方法 我知道答案已被标记为已回答,但我找到了一个不使用calc的解决方案,而是使用了nth-child,而 compatibility table则优于 compatibility table.

.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.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,0.6);}.myborder div:nth-child(2) {  position: absolute;  top: 5px;  right: 5px;  bottom: 5px;  left: 5px;}

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

总结

以上是内存溢出为你收集整理的html – 触发器CSS：仅当悬停在边框上时悬停全部内容，希望文章能够帮你解决html – 触发器CSS：仅当悬停在边框上时悬停所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。