首頁 > web前端 > css教學 > 主體

分享幾款非常好看的滑鼠懸停樣式

王林
發布: 2021-03-17 14:06:44
轉載
5961 人瀏覽過

分享幾款非常好看的滑鼠懸停樣式

前言:

當我們需要為滑鼠懸停添加一個樣式,都會使用hover偽類,透過它我們可以在滑鼠移動到元素上時向此元素添加特殊的樣式。例如一個普通的URL,當我們將滑鼠移到URL連結上,它會變色。

一、概述​​

在現實的應用場景也非常之多。最常見的是網站的懸浮導航,當滑鼠放到導航條上時,會出現顏色變化或元素自動伸出選單列。

分享幾款非常好看的滑鼠懸停樣式

 實例1:滑鼠hover時,將內容框起來

<!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首頁最下面有這樣的圖片

原始網頁:

分享幾款非常好看的滑鼠懸停樣式

滑鼠懸停後效果:

分享幾款非常好看的滑鼠懸停樣式

#其實這個主要就是用hover製作而成。下面說一下具體實作:

實作想法:

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高度和寬度,class為touch,overflow設定為hidden,圖片超過定義的高度和寬度會隱藏。

.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}
登入後複製

2、div2為content,內容必須填滿div1,所以設定上下左右都為0.且設定字體大小、顏色、對齊方式。

首先設定div2為不可見,即在滑鼠hover之前內容預設是隱藏的,當滑鼠懸浮後,再放出來。

.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、最後設定input框與button

.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設定成relative,把content設定absolute,然後top、bottom、left、right設定都是0,也就是把content鋪滿div;

2、visibility:hidden;預設隱藏最上面的內容;

3、visibility:visible和background-color:rgba(0,0,0,0.5),hover時放出內容,並且設定背景透明度,可以看到背景圖片;

相關推薦:CSS教學

作者:@skyflask
轉載本文請註明出處:https://www.cnblogs.com/skyflask/p/ 8886508.html

#

以上是分享幾款非常好看的滑鼠懸停樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!