如何选择两个类与CSS？

我试图弄清楚，我如何选择两个类，以便当我将其悬停在其中一个类上时，它会执行我想要的动画。这是我曾尝试过的：如何选择两个类与CSS？

.news1 { 
    -webkit-filter: blur(3px); 
    filter: blur(3px); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out;; 

} 
.news1:hover .news1msg:hover { 
    -webkit-filter: blur(0); 
    filter: blur(0); 
} 
.news1msg { 
    -webkit-filter: blur(3px); 
    filter: blur(3px); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out;; 
}

来源

2016-12-15 Ronnie Gurr

尝试把'，'类选择之间：.news1'：悬停，.news1msg：hover' – Seeker

'.news1'和'.news1msg'是一样的，所以你可以合并这些像悬停规则。具有相同规则的多个类是'，'分离的。 ...并删除双';;'并换成单个！ –

你的HTML结构如何？ – nmnsud

这种选择可以匹配所有类开始“新闻”如。新闻1，news1msg

[class^="news"] { 
    -webkit-filter: blur(0); 
    filter: blur(0); 
}

编辑： 在我想你的snippset有你需要用模糊的东西。

.news1 { 
 
    background-color:#33aaff; 
 
    width:100px; 
 
    height:100px; 
 
    text-align:center; 
 
    -webkit-filter: blur(3px); 
 
    filter: blur(3px); 
 
    -webkit-transition: .3s ease-in-out; 
 
    transition: .3s ease-in-out;; 
 

 
} 
 
.news1:hover { 
 
    -webkit-filter: blur(0); 
 
    filter: blur(0); 
 
} 
 
.news1msg { 
 
    color:white; 
 
    font-size:25px; 
 
    -webkit-transition: .3s ease-in-out; 
 
    transition: .3s ease-in-out;; 
 
}

<p class="news1"> 
 
    <span class="news1msg">some text</span> 
 
</p>

来源

2016-12-15 12:59:37

如果你想将相同的CSS应用于多个类或选择器，你可以使用逗号。

.class1, 
.class2{ 
    /* some styles */ 
}

来源

2016-12-15 12:51:39 selvassn

.news1:hover, .news1msg:hover { 
    -webkit-filter: blur(0); 
    filter: blur(0); 
}

来源

2016-12-15 12:52:11

这样做可以让我悬停其中一个，它会改变模糊，但我试图悬停在图像上，它摆脱了文字和图像上的模糊 –

然后需要添加img像.news1 img：hover –

使用,分开选择：

.news1:hover, 
.news1msg:hover { 
    -webkit-filter: blur(0); 
    filter: blur(0); 
}

只是要疼你把.news1msg {后:hover效果，或者不会生效

如果您需要徘徊在子元素的父和应用模糊：

.news1:hover .news1msg { 
    -webkit-filter: blur(0); 
    filter: blur(0); 
}

如果徘徊在孩子不能应用CSS来的父元素

来源

2016-12-15 12:52:21 Justinas

这样做可以让我将它悬停在其中一个上面，它会改变模糊效果，但我试图将其悬停在图像上，并且它消除了文本和图像上的模糊 –

如何选择两个类与CSS？

回答

相关问题