マウスがCSSを通過したときに表示スタイルを非表示にする方法-フロントエンドQ&A-php.cn

マウスがCSSを通過したときに表示スタイルを非表示にする方法

青灯夜游

リリース： 2022-09-22 17:49:56

オリジナル

4763 人が閲覧しました

CSS では、「:hover」セレクターと display 属性を使用して、マウスがその上を通過したときに表示スタイルを非表示にすることができます。必要なのは、「:hover」セレクターを使用して要素を選択することだけです。マウスポインタが浮いている状態を指定します。 status 要素に「display:none;」スタイルを設定するだけです。構文は「specify element:hover {display:none;}」です。

マウスがCSSを通過したときに表示スタイルを非表示にする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、「:hover」セレクターと表示属性を使用して、マウスが通過したときに表示スタイルを非表示にすることができます。

「:hover」セレクターを使用して、マウスポインターが浮いている要素を選択し、この状態の要素に「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を通過したときに表示スタイルを非表示にする方法

説明:

:ホバーセレクター

#:hover セレクターは、マウスポインターが浮いている要素を選択するために使用されます。

ヒント: :hover セレクターは、リンクだけでなくすべての要素で使用できます。

スタイルを有効にするには、CSS 定義で、:hover を :link および :visited (存在する場合) の後に配置する必要があります。
: リンクセレクターは、訪問されていないページを指すリンクのスタイルを設定します。:visited セレクターは、訪問済みのページへのリンクを設定するために使用され、:active セレクターはアクティブなリンクに使用されます。。

使用法 1:

これは、マウスをスタイル a の上に置くと、a の背景色が黄色に設定されることを意味します

a:hover
    { 
        background-color:yellow;
    }

ログイン後にコピー

これは最も一般的な使用法で、a を介してスタイルを変更するだけです。

使用法 2:

a を使用して他のブロックのスタイルを制御します:

a を使用して a の子要素 b を制御します:

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

ログイン後にコピー

a を使用して a の兄弟要素 c (兄弟要素) を制御します:

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

ログイン後にコピー

a を使用して近くの要素を制御しますd of a:

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

ログイン後にコピー

要約すると:

1. 子要素を制御するために中間には何も追加しません;

2. ' ' 兄弟を制御します要素 (兄弟要素) ;

3.「～」は近くの要素を制御します;

例

ボタンを使用して、要素の移動状態を制御しますマウスがボタンに移動すると、マウスが上にあるとボックスは動きを停止し、マウスが離れるとボックスは動き続けます

body code:

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

ログイン後にコピー

css style:

<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を通過したときに表示スタイルを非表示にする方法

"display:none;" style

display:none はスペースを占有せずに要素を動的に非表示にできます。この属性を変更すると再配置（ページレイアウトの変更）が発生するのは理解できますページから要素を削除するのと同じで、子孫には継承されませんが、その子孫は表示されません一緒に隠れてます。

<!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を通過したときに表示スタイルを非表示にする方法