css如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式

發(fā)布時(shí)間：2022-09-23 09:34:50 來(lái)源：億速云閱讀：519 作者：iii 欄目：web開(kāi)發(fā)

本篇內(nèi)容介紹了“css如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在CSS中，可以利用“:hover”選擇器和display屬性來(lái)實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式；只需要利用“:hover”選擇器選擇鼠標(biāo)指針浮動(dòng)在上面的元素，并給該狀態(tài)的元素設(shè)置“display:none;”樣式即可，語(yǔ)法“指定元素:hover {display:none;}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在CSS中，可以利用“:hover”選擇器和display屬性來(lái)實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式。

只需要利用“:hover”選擇器選擇鼠標(biāo)指針浮動(dòng)在上面的元素，并給該狀態(tài)的元素設(shè)置“display:none;”樣式，讓其隱藏即可。

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 520px;
				height: 50px;
				background-color: #008000;
				
			}
			div:hover {
				display:none;
			}
		</style>
	</head>
	<body>
		<div>
			hello
		</div>
	</body>
</html>

css如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式

說(shuō)明：

:hover 選擇器

:hover 選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。

提示：:hover 選擇器可用于所有元素，不只是鏈接。

在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話(huà)），這樣樣式才能生效。
:link 選擇器設(shè)置指向未被訪(fǎng)問(wèn)頁(yè)面的鏈接的樣式，:visited 選擇器用于設(shè)置指向已被訪(fǎng)問(wèn)的頁(yè)面的鏈接，:active 選擇器用于活動(dòng)鏈接。

用法1：

這個(gè)表示的是：當(dāng)鼠標(biāo)懸浮在a這個(gè)樣式上的時(shí)候，a的背景顏色設(shè)置為黃色

a:hover
    { 
        background-color:yellow;
    }

這個(gè)是最普通的用法了，只是通過(guò)a改變了style

用法2:

使用a 控制其他塊的樣式：

使用a控制a的子元素 b：

    .a:hover .b {
            background-color:blue;
        }

使用a控制a的兄弟元素 c(同級(jí)元素)：

.a:hover + .c {
        color:red;
    }

使用a控制a的就近元素d：

.a:hover ~ .d {
        color:pink;
    }

總結(jié)一下：

1. 中間什么都不加控制子元素；

2. ‘+’ 控制同級(jí)元素（兄弟元素）；

3. ‘～’ 控制就近元素；

實(shí)例

用一個(gè)按鈕控制一個(gè)盒子的運(yùn)動(dòng)狀態(tài)，當(dāng)鼠標(biāo)移到按鈕上方時(shí)，盒子停止運(yùn)動(dòng)，鼠標(biāo)移開(kāi)時(shí)，盒子繼續(xù)運(yùn)動(dòng)

body代碼：

<body>
    <div class="btn stop">stop</div>
    <div class="animation"></div>
</body>

css樣式：

<style>
    .animation {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 100px auto;
        animation: move 2s infinite alternate;
        -webkit-animation: move 2s infinite alternate;
    }
    @keyframes move {
        0% {
            transform: translate(-100px, 0);
        }
        100% {
            transform: translate(100px, 0);
        }
    }
    .btn {
        padding: 20px 50px;
        background-color: pink;
        color: white;
        display: inline-block;
    }
    .stop:hover ~ .animation {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
</style>

css如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式

“display:none;”樣式

display:none可以不占據(jù)空間，把元素隱藏起來(lái)，所以動(dòng)態(tài)改變此屬性時(shí)會(huì)引起重排（改變頁(yè)面布局），可以理解成在頁(yè)面中把該元素刪除掉一樣；不會(huì)被子孫繼承，但是其子孫是不會(huì)顯示的，畢竟都一起被隱藏了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .display{
                display:none;
            }
        </style>
    </head>
    <body>
        <div>正常顯示元素</div>
        <div class="display">隱藏元素</div>
        <div>正常顯示元素</div>
    </body>
</html>

css如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式

“css如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

css如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)隱藏顯示樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽