CSSで2つのクラスを選択する方法は？

Question

私は2つのクラスをどのように選択してクラスのどれかにカーソルを置くと、私が望むアニメーションを作ることができます。これは私が試みたものです：

.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を適用することはできませんが例えば「ニュース」で始まります。 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>

Answer 2

複数のクラスまたはセレクタに同じCSSを適用する場合は、コンマを使用できます。別のセレクタに

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

Answer 3

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

Answer 4

使用,：

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

ちょうどあなたが.news1msg {後:hover効果を置く痛み作るか、またはあなたが必要な場合には、効果

---

がかかりません。ホバーする親と子要素にぼかしを適用する：

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

このセレクタは、すべてのクラスを一致させることができ、子供に