bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

如何利用css偽類選擇器hover控制兩個元素屬性

小編給大家分享一下如何利用css偽類選擇器hover控制兩個元素屬性，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創新互聯公司專注為客戶提供全方位的互聯網綜合服務，包含不限于成都網站建設、成都做網站、綏中網絡推廣、小程序制作、綏中網絡營銷、綏中企業策劃、綏中品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創新互聯公司為所有大學生創業者提供綏中建站搭建服務，24小時服務熱線：18982081108，官方網址：vcdvsql.cn

利用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:請將鼠標懸浮至搜索框和按鈕上</h4>
    <form action="">
        <input type="text" class="searchIput1">
        <input type="submit" value="??" class="searchIput2">
    </form>
</div>
</body>
</html>

Feedback：利用hover控制兩個元素可以達到不用js也能寫出簡易的下拉菜單、向下彈出二維碼或者輸入框顏色整體變化 
提示等小特效。
注意：在使用過程中觸發選擇器只能寫需要觸發元素本身的選擇器

不能用

父元素選擇器1 子元素選擇器1:hover, 父元素選擇器2 子元素選擇器2:hover{color:red;}

的寫法

建議用

元素選擇器 1:hover + 元素選擇器 2{color:red;}

元素選擇器 1:hover{color:red;}

的寫法

看完了這篇文章，相信你對“如何利用css偽類選擇器hover控制兩個元素屬性”有了一定的了解，如果想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

網頁標題：如何利用css偽類選擇器hover控制兩個元素屬性
網站URL：http://vcdvsql.cn/article2/pepooc.html

成都網站建設公司_創新互聯，為您提供網站收錄、虛擬主機、營銷型網站建設、關鍵詞優化、搜索引擎優化、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

營銷型網站建設