快捷導(dǎo)航

JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁面切換效果

更新時(shí)間：2022年03月30日 17:23:27 作者：某次最深刻的慢鏡

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁面切換效果的具體代碼，供大家參考，具體內(nèi)容如下

前幾天做了個(gè)常見的頁面懸浮效果，直接上圖。

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">網(wǎng)購</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<div class="content">
?? ??? ??? ?<div>這是關(guān)于娛樂新聞的內(nèi)容</div>
?? ??? ??? ?<div>這是關(guān)于美容的內(nèi)容</div>
?? ??? ??? ?<div>這是關(guān)于網(wǎng)購的天地</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</body>
</html>

JS:

$(function() {
?? ?$(".content div:gt(0)").hide();//隱藏類是content的標(biāo)簽下的腳標(biāo)大于0的div
?? ?$(".tab li").css("cursor", "pointer");//光標(biāo)變小手
?? ?$(".tab li").hover(//懸浮變色，不懸浮恢復(fù)顏色
?? ??? ?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{
?? ?/*無序列表去點(diǎn)*/
?? ?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{
?? ?/*內(nèi)容框格式*/
?? ?border-top:1px;
?? ?height:60px;
}
.xuanxiangkuang{
?? ?/*選項(xiàng)框格式*/
?? ?border:solid 1px black;
?? ?background-color:#ffffff;
?? ?bottom:-1px;
?? ?position:relative;
?? ?z-index:1
}
.pink{
?? ?background-color: #FF1493;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: