とても素敵なマウスオーバースタイルを共有します-CSSチュートリアル-php.cn

とても素敵なマウスオーバースタイルを共有します

王林

リリース： 2021-03-17 14:06:44

転載

6021 人が閲覧しました

とても素敵なマウスオーバースタイルを共有します

前書き:

マウスホバーのスタイルを追加する必要がある場合は、マウスの移動時にこれを追加できる hover 疑似クラスを使用します。要素に特別なスタイルを追加します。たとえば、通常の URL の場合、URL リンクの上にマウスを移動すると、色が変わります。

1. 概要

実際のアプリケーションシナリオが多数あります。最も一般的なのは Web サイトのフローティングナビゲーションで、ナビゲーションバーにマウスを置くと色が変わるか、要素が自動的にメニューバーからはみ出します。

とても素敵なマウスオーバースタイルを共有します

例 1: マウスをホバーすると、コンテンツが枠で囲まれます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>    
    <style>        
    .ele:hover {            
    border:1px solid red;        
    }        
    .ele {    
    #去掉边框闪烁问题。（因为边框1像素会导致闪烁，所以先用1px透明色占住位置，hover时再让其变红，就不会觉得有闪烁了）            
    border:1px solid transparent;        
    }    
    </style>
    </head><body>    
    <div class="ele">        
    <div>222</div>        
    <div class="ele-item">111</div>    
    </div>
    </body>
    </html>

ログイン後にコピー

元の効果:

とても素敵なマウスオーバースタイルを共有します

マウスを置いた後:

とても素敵なマウスオーバースタイルを共有します

例 2: vdangdang.com ホームページの下部にこのような画像があります

元の Web ページ:

とても素敵なマウスオーバースタイルを共有します

マウスホバー後の効果:

とても素敵なマウスオーバースタイルを共有します

実際、これは主にホバーを使用して行われます。具体的な実装について話しましょう:

実装のアイデア:

1. 新しい div1
2 を作成します。新しい div2 を作成し、下の画像を div2
3 に配置します。新しい div3. を作成し、中断されたコンテンツを div3

HTML コードに配置します:

<div class="touch">
        <div><img  src="3.png" alt="とても素敵なマウスオーバー スタイルを共有します" ></div>
        <div class="content">
            <p><h5>品牌故事</h5></p>
            <p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。</h6></p>
            <input class="inpt" type="text" name="tel" id="tel"/>
            <button class="btn">开售提醒</button>
        </div>
   </div>

ログイン後にコピー

(学習ビデオ共有: css ビデオチュートリアル)

CSSコード:

1. div1 の高さと幅を定義し、クラスを touch に設定し、オーバーフローを非表示に設定します。画像が定義された高さと幅を超える場合、画像は非表示になります。

.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}

ログイン後にコピー

2. div2 はコンテンツであり、コンテンツは div1 を満たす必要があるため、上下左右を 0 に設定します。また、フォントサイズ、色、配置も設定します。

最初に div2 を非表示に設定します。つまり、マウスをホバーする前にコンテンツはデフォルトで非表示になります。マウスをホバーすると解放されます。

.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
}

ログイン後にコピー

3. マウスホバー時のスタイルを設定します。コンテンツがリリースされ、背景画像の透明度が 0.5 に設定されて見えるようになります。

.touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}

ログイン後にコピー

4. 最後に入力ボックスとボタンを設定します

.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
}

ログイン後にコピー

HTML コード全体:

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style>        
.touch {            
height:200px;            
width:400px;            
overflow:hidden;            
position:relative;        
}        
.touch .content {            
top:0;            
left:0;            
right:0;            
bottom:0;            
position:absolute;            
font-size:20px;            
background-color:black;            
color:white;            
text-align:center;            
visibility:hidden;        
}        
.touch:hover .content{            
visibility:visible;            
border:4px solid red;            
background-color:rgba(0,0,0,0.5)        
}       
.touch .content .btn{            
background-color:#e83375;            
color:white;            
cursor: pointer;            
border: none;            
width: 70px;            
height: 22px;            
}         
.touch .content .inpt{            
height: 18px;            
border: none            
line-height: 18px;            
font-size: 12px;         
}     
</style>
</head>
<body>    
<div class="touch">        
<div><img  src="3.png" alt="とても素敵なマウスオーバー スタイルを共有します" >
</div>        
<div class="content">            
<p><h5>品牌故事</h5></p>            
<p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。 </h6></p>            
<input class="inpt" type="text" name="tel" value="请输入手机号码或邮箱地址" id="tel"/>            
<button class="btn">开售提醒</button>        
</div>    
</div>
</body>
</html>

ログイン後にコピー

重要な知識ポイント:

1、最も外側の div を相対に設定し、コンテンツを絶対に設定し、上、下、左、右を 0 に設定します、つまり、div をコンテンツで埋めます;

2、visibility:hidden;一番上の部分はデフォルトで非表示になっていますコンテンツ;

3、visibility:visible、background-color:rgba(0,0,0,0.5)、ホバー時にコンテンツを解放し、背景の透明度を設定すると、背景画像を見ることができます;

関連する推奨事項: CSS チュートリアル

著者: @skyflask
この記事を転載する場合は出典を明記してください: https: //www.cnblogs.com/skyflask/p/ 8886508.html

以上がとても素敵なマウスオーバースタイルを共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。