如何選擇兩個類與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？

回答

相關問題