Question

我试图弄明白，我如何选择两个类，以便当我将鼠标悬停在其中一个类上时，它会执行我想要的动画。这就是我的尝试：

.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;;
}

Answer 1

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

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

Answer 2

if not adoTreeWindow.FieldByName('RetailCalendarPeriodID').IsNull then    
  dxMemData1RetailCalendarPeriodID.AsInteger := adoTreeWindow.FieldByName('RetailCalendarPeriodID').AsIntege‌r

Answer 3

使用,分隔选择器：

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

只是让你在:hover之后放置.news1msg {效果，或者它不会生效

如果您需要将鼠标悬停在父元素上并对子元素应用模糊：

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

如果将鼠标悬停在子

上，则无法将CSS应用于父元素

Answer 4

此选择器可以匹配所有以'news'开头的类，例如。 news1，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>

如何使用CSS选择两个类？

4 个答案: