Question

我有2个div，我想将第一个鼠标悬停以影响它们两个，我在论坛上发现了如何通过悬停第一个而不是两个都影响第二个。

有我的代码：

        .red{
                height: 150px;
                width: 150px;
                background-color: red;
                float:left;
                margin-right: 20px;
        }

        .blue{
                height: 150px;
                width: 150px;
                background-color: blue;
                float:left;
        }

        .red:hover ~ .blue{
                transition: all .2s ease-in-out; 
                transform: scale(1.1); 
        }

<html>
<head>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

感谢您的帮助。

Answer 1

您可以将red:hover选择器添加到上一个样式声明中也就是说，您要做的就是将红色div悬停在蓝色div上

.red{
                height: 150px;
                width: 150px;
                background-color: red;
                float:left;
                margin-right: 20px;
        }

        .blue{
                height: 150px;
                width: 150px;
                background-color: blue;
                float:left;
        }

        /* added one more selector here */
        .red:hover,
        .red:hover ~ .blue{
                transition: all .2s ease-in-out; 
                transform: scale(1.1); 
        }

<html>
<head>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

Answer 2

要将规则应用于多个选择器，请在选择器之间使用逗号

.red:hover ~ .blue, .red:hover {
                transition: all .2s ease-in-out; 
                transform: scale(1.1); 
        }

Answer 3

您始终可以将要影响的div赋予相同的类。

<html>
<head>
</head>
<body>
    <div class="red affect"></div>
    <div class="blue affect"></div>
</body>
</html>


.affect {
     width: 150px;
     height: 150px;

     float:left;
}

.red {
     background-color: red;
 }

 .blue {
     background-color: blue;
  }

  .affect:hover {
     transition: all .2s ease-in-out; 
     transform: scale( 1.2 ); 
    }

在Hover上，将CSS规则应用于多个类

3 个答案: