Question

我有这个CSS + HTML代码：

    <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>What</title>
    <style type="text/css">
        #page {
            width: 900px;
            padding: 0px;
            margin: 0 auto;
            direction: rtl;
            position: relative;
        }

        #box1 {
            position: relative;
            width: 500px;
            border: 1px solid black;
            box-shadow: -3px 8px 34px #808080;
            border-radius: 20px;
            box-shadow: -8px 5px 5px #888888;
            right: 300px;
            top: 250px;
            height: 150px;
            -webkit-transition: all 1s;
            font-size: large;
            color: Black;
            padding: 10px;
            background: #D0D0D0;
            opacity: 0;
        }


        @-webkit-keyframes myFirst {
            0% {
                right: 300px;
                top: 150px;
                background: #D0D0D0;
                opacity: 0;
            }

            100% {
                background: #909090;
                ;
                right: 300px;
                top: 200px;
                opacity: 1;
            }
        }

        #littlebox1 {
            top: 200px;
            position: absolute;
            display: inline-block;
        }

            .littlebox1-sentence {
                font-size: large;
                padding-bottom: 15px;
                padding-top: 15px;
                padding-left: 25px;
                padding-right: 10px;
                background: #D0D0D0;
                border-radius: 10px;  -webkit-transition: background .25s ease-in-out;
            }

            #littlebox1:hover ~ #box1 {
                -webkit-transition: all 0s;
                background: #909090;;
                right: 300px;
                top: 200px;
                -webkit-animation: myFirst 1s;
                -webkit-animation-fill-mode: initial;
                opacity: 1;

            }
        .littlebox1-sentence:hover {
  background: #909090;
}
.littlebox1-sentence:hover + .triangle {
  border-right: 50px solid #909090;
}

            .triangle {
                position: relative;
                width: 0;
                height: 0;
                border-right: 50px solid #D0D0D0;
                border-top: 24px solid transparent;
                border-bottom: 24px solid transparent;
                right: 160px;  -webkit-transition: border-right .25s ease-in-out;

            }
        .triangle:hover {
               border-right:50px solid #909090;

            }
    </style>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script>     
     $(function() {
  $('.littlebox1-sentence').hover(function() {
    $(this).css('background', '#909090');
    $('.triangle').css('border-right', '50px solid #909090');
  });

   </script>
     <script>    $(function() {
  $('.triangle').hover(function() {
    $(this).css('border-right', '50px solid #909090');
    $('.littlebox1-sentence').css('background', '#909090');
  });
 </script>
</head>
<body dir="rtl">
    <div id="page">
        <div id="littlebox1" class="littlebox1-sentence">put your mouse here</div><div id="littlebox1" class="triangle"> </div>
        <div id="box1">
                       </div>
        </div>


</body>
</html>

您可以找到实时示例here。这里的问题是第二个jQuery代码出了问题。我希望每当我将鼠标放在盒子或三角形上时，两者都会改变颜色。当我把鼠标放在盒子上它工作正常，但当我把鼠标放在三角形上它不起作用。

有关如何修复此代码的任何建议吗？

Answer 1

只需将盒子和三角形包装在一个容器中，你就可以通过在容器的悬停状态下使用后代选择器来使用CSS而不是javascript来完成所有操作：

#bothcontainer:hover ~ #box1 { ... }
#bothcontainer:hover .littlebox1-sentence { ... }
#bothcontainer:hover .triangle { ... }

小提琴here。

CSS3 - “连接”2类动画

1 个答案: