CSS悬停触发底层和顶层
[英]CSS hover trigger of underlaying layer and top layer
问题描述
How to make a css hover transition for both layers. 
如何为两个图层进行css悬停转换。 I wrote the whole page so that you can (copy/paste) try it from your computer desktop. 我编写了整个页面，以便您可以（复制/粘贴）从计算机桌面进行尝试。 What I have works, but can it be done without javascript/jQuery with pure CSS? 我有什么工作，但可以没有javascript / jQuery纯CSS吗？ I tried with CSS pointer-events and was able to transition either the top layer (#circleOuter) or the underlaying layer (#circleInner) but not both layers. 我尝试使用CSS指针事件，并且能够转换顶层（#circleOuter）或底层（#circleInner），但不能转换到两个层。 For this to work, #circleOuter:hover has to trigger #circleInner. 为此，＃circleOuter：hover必须触发#circleInner。 Any help is appreciated. 任何帮助表示赞赏。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("#circleOuter").hover(function(){
$("#circleInner").css("transform","rotate(180deg)");
$("#circleOuter").css("transform","rotate(-180deg)");
}, function(){
$("#circleInner").css("transform","rotate(0deg)");
$("#circleOuter").css("transform","rotate(0deg)");
});
});
</script>
<style>
#circleWrap
{
background:#ff0;
width:200px;
height:200px;
position:relative;
}
#circleInner
{
background:url(http://socalsky.com/_/images/mis/circle_inner.png) center center/ 188px 188px no-repeat;
width:200px;
height:200px;
position:absolute;
transform: rotate(0deg);
transition: 500ms ease all;
}
#circleOuter
{
background:url(http://socalsky.com/_/images/mis/circle_outer.png) center center/ 200px 200px no-repeat;
width:200px;
height:200px;
position:absolute;
transform: rotate(0deg);
transition: 500ms ease all;
}
</style>
</head>
<body>
<div id="circleWrap">
<div id="circleInner">
</div>
<div id="circleOuter">
</div>
</div>
</body>
</html>
3 个解决方案
解决方案1
3 2017-04-17 16:09:38
this worked for me. 这对我有用。 check the plunkr out . 检查一下plunkr。 done using pure css ---> https://plnkr.co/edit/FQkBWUNJ79q43eknO7p9?p=preview 用纯CSS完成---> https://plnkr.co/edit/FQkBWUNJ79q43eknO7p9?p=preview
#circleWrap:hover>#circleInner{
transform: rotate(180deg);
}
#circleWrap:hover>#circleOuter{
transform: rotate(-180deg);
}
解决方案2
3 已采纳 2017-04-17 16:10:36
Based on your actual example I don't see the need to trigger the event on hover the #circleOuter:hover if both elements are the size of the container and trigger at the same time just use the parent to trigger it: 根据您的实际示例，我没有看到在悬停 #circleOuter:hover触发事件的需要#circleOuter:hover如果两个元素都是容器的大小并且同时触发，则只需使用父触发它：
#circleWrap { background: #ff0; width: 200px; height: 200px; position: relative; } #circleInner { background: url(http://socalsky.com/_/images/mis/circle_inner.png) center center/ 188px 188px no-repeat; width: 200px; height: 200px; position: absolute; transform: rotate(0deg); transition: 500ms ease all; } #circleOuter { background: url(http://socalsky.com/_/images/mis/circle_outer.png) center center/ 200px 200px no-repeat; width: 200px; height: 200px; position: absolute; transform: rotate(0deg); transition: 500ms ease all; } #circleWrap:hover #circleInner{ transform: rotate(180deg); } #circleWrap:hover #circleOuter{ transform: rotate(-180deg); }
<div id="circleWrap"> <div id="circleInner"> </div> <div id="circleOuter"> </div> </div>
解决方案3
1 2017-04-17 16:12:33
just add below css and remove jquery. 只需添加以下css并删除jquery。
#circleWrap:hover>#circleInner
{
transform: rotate(180deg);
transition: 500ms ease all;
}
#circleWrap:hover>#circleOuter
{
transform: rotate(-180deg);
transition: 500ms ease all;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.