首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Hover上,将CSS规则应用于多个类

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

Stack Overflow用户
提问于 2018-08-12 02:03:41
回答 3查看 905关注 0票数 0

我有两个div,我想通过悬停第一个div来影响它们,我在论坛上发现了如何通过悬停第一个div来影响第二个div,但不是两个都影响。

下面是我的代码:

代码语言:javascript
复制
        .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); 
        }
代码语言:javascript
复制
<html>
<head>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

谢谢你帮我。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-12 02:08:58

你可以将red:hover选择器添加到最后的样式声明中,比如你对悬停的红色div所做的,就像你对蓝色div所做的那样

代码语言:javascript
复制
.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); 
        }
代码语言:javascript
复制
<html>
<head>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

票数 1
EN

Stack Overflow用户

发布于 2018-08-12 02:10:17

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

代码语言:javascript
复制
.red:hover ~ .blue, .red:hover {
                transition: all .2s ease-in-out; 
                transform: scale(1.1); 
        }
票数 0
EN

Stack Overflow用户

发布于 2018-08-12 02:15:35

你总是可以给你想要影响的div提供相同的类。

代码语言:javascript
复制
<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 ); 
    }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51802397

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档