CSS trigger: hover only when you hover over the frame
I am creating a rectangular path with a thin border 5px
around the empty one <div>
. When the user hovers over the border, I want the border to change color. This all works fine, but I don't want the border to stay resized when the user mouse is inside <div>
, because it is no longer on the border.
See an example here: 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>
Can this be done?
source to share
I know the answer has been marked as an answer, but I found a solution that doesn't use calc
, but nth-child
instead that table compatibility is better than 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>
source to share
:hover
events only work on the top most of the elements (and inside elements). So you can achieve this effect by making another div the same size as yours myborder
, but subtracting the border size. Then place it directly over myborder
.
This way the hover event will fire during the border (the window shadow in your case), but not inside. See 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>
source to share
This is almost the same solution as @Kevin's:
https://jsfiddle.net/qbcc1trt/1/
The idea is to place two elements, one (B) above the other (A), so when the user is :hover
element B, it will not actually be :hover
element A.
You have to make sure that element B is not inside element 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 that I used the parent container here (which might be simpler, depending on your solution).
source to share