溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JavaScript如何實現鼠標懸浮頁面切換效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript如何實現鼠標懸浮頁面切換效果”這篇文章吧。
具體內容如下
前幾天做了個常見的頁面懸浮效果，直接上圖。
html代碼
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/4.css" /> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/4.js"></script> </head> <body> <div class="zong"> <div class="tab"> <ul> <li class="xuanxiangkuang">娛樂</li> <li class="xuanxiangkuang">美容</li> <li class="xuanxiangkuang">網購</li> </ul> </div> <div class="content"> <div>這是關于娛樂新聞的內容</div> <div>這是關于美容的內容</div> <div>這是關于網購的天地</div> </div> </div> </body> </html>
JS:
$(function() {
$(".content div:gt(0)").hide();//隱藏類是content的標簽下的腳標大于0的div
$(".tab li").css("cursor", "pointer");//光標變小手
$(".tab li").hover(//懸浮變色，不懸浮恢復顏色
function() {
$(this).addClass("pink");
},
function() {
$(this).removeClass("pink");
}).mouseover(function() {
$(".content div").eq($(this).index()).siblings().hide().end().show();
})
});CSS:
body,div,ul{
padding:0px;
margin:0px;
}
.zong{
width:800px;
margin:150px;
}
.tab li{
/*無序列表去點*/
list-style:none;
/*左浮*/
float:left;
margin-right:10px;
line-height:30px;
height:30px;
width:65px;
text-align:center;
}
.content{
border:solid 1px black;
/*不讓他左浮*/
clear:both;
}
.content div{
/*內容框格式*/
border-top:1px;
height:60px;
}
.xuanxiangkuang{
/*選項框格式*/
border:solid 1px black;
background-color:#ffffff;
bottom:-1px;
position:relative;
z-index:1
}
.pink{
background-color: #FF1493;
}以上是“JavaScript如何實現鼠標懸浮頁面切換效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
