Is it possible to make the following jQuery with pure CSS(3)?
$(".js.outer").hover(function() {
$(this).css({'border': '2px inset red'});
return false;
}, function() {
$(this).css({'border': 'none'});
return false;
});
$(".js.inner").hover(function(event) {
$(this).css({'border': '2px inset blue'});
return false;
}, function() {
$(this).css({'border': 'none'});
return false;
});
with this HTML
<div class="js outer">
<div class="js inner">
</div>
</div>
I have tried in this fiddle http://jsfiddle.net/AA9Nw/ , however when I hover the inner element, the outer also gets the hover event. (with CSS)
On a side note, the jQuery one seems a bit buggy, when the mouse enters from the left or right the hover effect doesn't let go properly. Am I doing something wrong?
Separate your divs:
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
And this is the CSS:
.container {
position: relative;
}
.one {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: green;
}
.two {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background: yellow;
}
.one:hover {
border: 2px solid red;
}
.two:hover {
border: 2px solid blue;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.