5

我有这个 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>

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

任何建议如何修复此代码？

4

1 回答 1

3

只需将框和三角形包装在一个容器中，您就可以使用 CSS 而无需 javascript，在容器的悬停状态上使用后代选择器：

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

在这里拉小提琴。

于 2012-12-03T18:42:53.317 回答