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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
简单实现js页面切换功能
本文为大家介绍了js页面换肤功能处理原理 (*需要在有服务器环境下测试使用*),供大家参考,具体内容如下 原理: 1.换肤是让页面采用不用的样式设置 2.我们把要换肤的地方根据不用皮肤做成多个样式表文件 3.获取link的id 4.修改link的href属性改变样式表 5.采用了不用样式表,就是使用对应皮肤样式 6.利用cookie技术用户原则,用户再次打开页面也会采用上次选用皮肤 7.读取cookie要在页面载入开始,保证对应皮肤css提前加载 <html> <head> &l
-
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）
具体用法是这样的: 将Javascript代码放到</body>前(将脚本代码放在页面底端有助于提高页面速度,但是我现在还没有切身的体会) 复制代码 代码如下: <script language=JavaScript> function mouseOutPic() //当鼠标移出时,隐藏原图 { if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden&qu
-
js鼠标悬浮出现遮罩层的方法
本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl"> <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008
-
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法
-
JS代码实现页面切换效果
本文实例为大家分享了JS代码实现页面切换效果的具体代码,供大家参考,具体内容如下 HTML+CSS部分 添加所有页面,和上一页.具体页.下一页的按钮, 设置div样式,默认第一页显示,其他页隐藏. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .item { display: none; widt
-
基于JS实现翻书效果的页面切换样式
本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <
-
js制作的鼠标悬浮时产生的下拉框效果
先给大家补补课,讲个简单的例子: 复制代码 代码如下: <html><head> <meta type-equiv="Content-Type" content="text/html"> <meta charset="utf-8″> <script type="text/javascript"> jq=jQuery.noConflict(); jq=(document).rea
-
使用AngularJS实现可伸缩的页面切换的方法
AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出. 演示: http://embed.plnkr.co/PqhvmW/preview 首先,标记: <div class="page-container"> <div ng-view class="page-view&qu
-
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失. 比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEST</title
-
Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 html代码如下 <ul> <li> <a href=""> <img src="../../../img/goods/study.png" alt="学习"> <img class="h