[英]Trigger CSS :hover only when hovering over border box
I am creating a rectangular outline with a 5px
thin border box around an empty <div>
. 我正在创建一个矩形轮廓,在空
<div>
周围有一个5px
薄边框。 When the user hovers over the border I want the border to change colour. 当用户将鼠标悬停在边框上时,我希望边框改变颜色。 That's all working fine, but I don't want the border to remain changed when the user's mouse is inside the
<div>
because it's no longer actually on the border. 这一切都运行正常,但我不希望当用户的鼠标在
<div>
内时边框保持更改,因为它不再实际在边框上。
See an example here: https://jsfiddle.net/qbcc1trt/ 在这里查看示例: 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>
Any way to accomplish this? 有没有办法实现这个目标?
:hover
events only work on the top most element (and the elements inside). :hover
事件仅适用于最顶层的元素(以及内部元素)。 So you can achieve this effect by making another div the same size as your myborder
but subtracting the size of the border. 因此,您可以通过使另一个div与您的
myborder
相同的大小但减去边框的大小来实现此效果。 Then place it directly above myborder
. 然后将它直接放在我的
myborder
上方。
This way, the hover event will trigger while over the border (box shadow in your case) but no the inside. 这样,悬停事件将在边界上触发(在您的情况下为框阴影)但不在内部。 See the demo below
请参阅下面的演示
.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>
It's almost the same solution as the one provided by @Kevin: 它与@Kevin提供的解决方案几乎相同:
https://jsfiddle.net/qbcc1trt/1/ https://jsfiddle.net/qbcc1trt/1/
The idea is to put two elements, one (B) above the other one (A), so when the user will :hover
element B he will actually not :hover
element A. 这个想法是把两个元素,一个(B)放在另一个元素(A)之上,所以当用户将
:hover
元素B时他实际上不会:hover
元素A.
You need to make sure the element B is not inside element 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>
Note the I used here a parent container (which might be easier, depending on your solution). 请注意我在这里使用的是父容器(根据您的解决方案,这可能更容易)。
I know the answer has been marked as answered but I found a solution that doesn't use calc
but nth-child
instead which has better compatibility table than calc . 我知道答案已被标记为已回答,但我找到了一个不使用
calc
的解决方案,而是使用nth-child
而不是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.