CSS底层和顶层的悬停触发器

如何为两个层进行CSS悬停过渡。我写了整个页面，以便您可以（复制/粘贴）从您的计算机桌面上进行尝试。我有什么作品，但是可以在没有JavaScript和纯CSS的jQuery的情况下完成？我尝试了CSS指针事件，并能够转换顶层（#circleOuter）或底层（#circleInner），但不能同时转换两层。为此，#circleOuter：hover必须触发#circleInner。任何帮助表示赞赏。CSS底层和顶层的悬停触发器

<!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>

来源

2017-04-17 Kobbe

根据您的实际例子，我不认为有必要触发事件上悬停的#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>

来源

2017-04-17 16:10:36 DaniP

听起来真的很好DaniP，会试试这个aswel，给我几个尝试所有这一切。谢谢一堆！ – Kobbe

这可能是一个问了一个问题。我如何将答案标记为正确答案？ – Kobbe

@Kobbe您可以在答案左侧的投票中看到灰色的复选标记 – DaniP

这对我有效。检查plunkr。使用纯CSS --->https://plnkr.co/edit/FQkBWUNJ79q43eknO7p9?p=preview

#circleWrap:hover>#circleInner{ 
transform: rotate(180deg); 
} 

#circleWrap:hover>#circleOuter{ 
transform: rotate(-180deg); 
}

来源

2017-04-17 16:09:38 lhavCoder

好的，现在就试试这个。感谢ihavCoder。 – Kobbe

当然:)它应该工作正常 – lhavCoder

谢谢你的帮助。 – Kobbe

只需添加下面的CSS和删除的jQuery。

#circleWrap:hover>#circleInner 
    { 
    transform: rotate(180deg); 
    transition: 500ms ease all; 
    } 

    #circleWrap:hover>#circleOuter 
    { 
    transform: rotate(-180deg); 
    transition: 500ms ease all; 
    }

来源

2017-04-17 16:12:33

谢谢你的帮助。 – Kobbe

我的荣幸@Kobbe –

CSS底层和顶层的悬停触发器

回答

相关问题