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

我知道答案已被标记为已回答,但我找到了一个不使用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, 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;

}