溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS如何實現(xiàn)鼠標懸停改變其他標簽樣式

發(fā)布時間：2021-03-17 13:49:21 來源：億速云 閱讀：206 作者：清風 欄目：web開發(fā)

這篇文章主要為大家展示了CSS如何實現(xiàn)鼠標懸停改變其他標簽樣式，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“CSS如何實現(xiàn)鼠標懸停改變其他標簽樣式”這篇文章吧。

控制其他標簽（根據(jù)控制標簽與被控制標簽之間的關(guān)系）可分為三種類型如下：

  • 本文中控制標簽為 .div1

  • 被控制標簽為 .div2

1.控制子標簽（.div1:hover和.div2之間使用空格）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover .div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1
            <div class="div3">div3</div>
            <div class="div2">div2</div>
        </div>
    </body>
</html>

被控制標簽只要是控制標簽的子標簽就可以，里有其他標簽（如.div3）不會影響效果！

2.控制兄弟標簽（.div1:hover和.div2之間使用+）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover+.div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <!-- <div class="div3">div3</div> -->
        <div class="div2">div2</div>
    </body>
</html>

使用“+”時，.div2必須緊貼在.div屁股后面才會有效果，否則無效?。?！例如：將.div3取消注釋后，.div1將無法控制.div2的樣式?。?！如果控制標簽和被控制標簽中間有內(nèi)容，需要按照第三種方式寫！

3.控制兄弟標簽（中間有內(nèi)容）（.div1:hover和.div2之間使用~）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover~.div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div3">div3</div>
        <div class="div2">div2</div>
    </body>
</html>

這種方法的使用要求是被控制標簽必須在控制標簽的下面，中間可以有任意內(nèi)容。

總結(jié)：

控制子標簽

中間使用空格

控制緊貼后面的兄弟標簽

中間使用“+”

控制后面任意兄弟標簽

中間使用“~”

以上就是關(guān)于“CSS如何實現(xiàn)鼠標懸停改變其他標簽樣式”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(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)容。

css
AI
助
手