溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何利用css偽類選擇器hover控制兩個元素屬性，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
示例1：
<html>
<body>
<style>
#a:hover {color : #FFFF00;}
#a:hover > #b:first-child{color : #FF0000;}
#a:hover > #b{color : #FF00FF;}
#a:hover + #c{color : #00FF00;}
#a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
<div id='b'>元素2</div>
<div id='b'>元素2</div>
</div>
<div id='c'>元素3
<div id='b'>元素2</div>
</div>
</body>
</html>示例2：
<html>
<body>
<style>
.header-bar-search {
width: 300px;
height: 50px;
font-size: 16px;
margin-top: 100px;
margin-left: 40%;
}
.header-bar-search input{
display: inline-block;
height: 50px;
outline: 0;
border: 1px solid #e0e0e0;
background: #fff;
transition: border-color .3s linear,color .3s linear,background-color .3s linear;
}
.header-bar-search .searchIput1 {
width: 250px;
padding: 0 10px;
border-right: none;
}
.header-bar-search .searchIput2 {
float: right;
width: 50px;
font-size: 20px;
}
.searchIput1:hover{
border-color: #ff6700;
}
.searchIput2:hover{
color: #fff;
background: #ff6700;
}
.searchIput1:hover + .searchIput2{
border-color: #ff6700;
}
</style>
<div class="header-bar-search">
<h4>tps:請將鼠標(biāo)懸浮至搜索框和按鈕上</h4>
<form action="">
<input type="text" class="searchIput1">
<input type="submit" value="??" class="searchIput2">
</form>
</div>
</body>
</html>
Feedback：利用hover控制兩個元素可以達到不用js也能寫出簡易的下拉菜單、向下彈出二維碼或者輸入框顏色整體變化
提示等小特效。
注意：在使用過程中觸發(fā)選擇器只能寫需要觸發(fā)元素本身的選擇器
不能用
父元素選擇器1 子元素選擇器1:hover, 父元素選擇器2 子元素選擇器2:hover{color:red;}
的寫法
建議用
元素選擇器 1:hover + 元素選擇器 2{color:red;}
元素選擇器 1:hover{color:red;}
的寫法
看完了這篇文章，相信你對“如何利用css偽類選擇器hover控制兩個元素屬性”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼