Question

如何为两个图层进行css悬停转换。我编写了整个页面，以便您可以（复制/粘贴）从计算机桌面进行尝试。我有什么工作，但可以没有javascript / jQuery纯CSS吗？我尝试使用CSS指针事件，并且能够转换顶层（#circleOuter）或底层（#circleInner），但不能转换到两个层。为此，＃circleOuter：hover必须触发#circleInner。任何帮助表示赞赏。

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

Answer 1

这对我有用。检查一下plunkr。使用纯css完成---＆gt; https://plnkr.co/edit/FQkBWUNJ79q43eknO7p9?p=preview

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

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

Answer 2

根据您的实际示例，如果两个元素都是容器的大小并且同时触发，则我认为不需要在悬停 id上触发事件使用父项触发它：

#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);
}

Answer 3

只需添加以下css并删除jquery。

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

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

CSS悬停触发底层和顶层

3 个答案: