在CSS中對不同類的懸停效果
[英]hover effect on different classes in css
問題描述
我希望對以下html類中的所有元素都具有懸停效果
的HTML
.wrapper:hover { color: white; }
<div class="wrapper"> <i class="fa fa-icon"> </i> <h4> Headertext </h4> <p> Some content text </p> <p> <a href="url"> text </a> </p> </div>
鼠標懸停在文本上。 問題是，我無法告訴所有圖標或標題之類的元素同時進行懸停效果。
4 個解決方案
解決方案1
0 2017-10-18 14:32:58
您可以像這樣將它們層疊下來：
.wrapper:hover i,
.wrapper:hover h4,
.wrapper:hover p,
.wrapper:hover p {
// some css here
}
順便說一下，這就是為什么像SASS和LESS這樣的預處理器很有用的原因，因為您可以用這種方式聲明您的塊：
.wrapper {
&:hover {
i {
// some css here
}
h4 {
// some css here
}
p {
// some css here
}
}
}
意味着您只需描述一次懸停狀態，然后就可以將各種瘋狂的樣式從懸停狀態鏈接到孩子們。
解決方案2
0 2017-10-18 14:37:11
解決方案3
0 2017-10-18 15:08:34
到目前為止，謝謝一噸。
我的工作幾乎完美。 我只有一個問題：
我已經嘗試過此代碼：
.wrapper:hover i,
.wrapper:hover h4,
.wrapper:hover a,
.wrapper:hover p {
color: white
}
而且有效。
但是，如果嘗試使用背景色，則無法使用：
碼
.wrapper:hover i,
.wrapper:hover h4,
.wrapper:hover a,
.wrapper:hover p {
color: white
}
.wrapper:hover {
background-color:blue;
}
解決方案4
-1 2017-10-18 14:46:28
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function () { $(".wrapper").hover(function () { $(".wrapper").css("color", "white"); $(".txt").css("color", "white"); }); }); </script> </head> <body> <div class="wrapper"> <i class="fa fa-icon"> </i> <h4> Headertext </h4> <p> Some content text </p> <p> <a class="txt" href="url"> text </a> </p> </div> </body> </html>
如何使用CSS將不同的懸停顏色效果應用於不同的Li
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.