js鼠标悬浮出现遮罩层的方法
作者:shichen2014 时间:2024-02-23 10:37:43
本文实例讲述了js鼠标悬浮出现遮罩层的方法。分享给大家供大家参考。具体实现方法如下:
html页面代码:
<ul class="site-tag fl">
<li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i><span class="tag-tit">科学</span> </a></li>
<li><a data-title="动漫" href="#"><i style="background-image: url(images/xiaozhan/main_NH8v_2e310001ebd1118e.jpg)">
</i><span class="tag-tit">动漫</span> </a></li>
<li><a data-title="生活" href="#"><i style="background-image: url(images/xiaozhan/main_OtnR_43a60000050a118c.jpg)">
</i><span class="tag-tit">生活</span> </a></li>
<li><a data-title="插画" href="#"><i style="background-image: url(images/xiaozhan/main_UD3z_2e510002074f118e.jpg)">
</i><span class="tag-tit">插画</span> </a></li>
<li><a data-title="音乐" href="#"><i style="background-image: url(images/xiaozhan/main_krFk_6323000018bd125d.jpg)">
</i><span class="tag-tit">音乐</span> </a></li>
<li><a data-title="自然" href="#"><i style="background-image: url(images/xiaozhan/main_UAbs_764f0001ff601190.jpg)">
</i><span class="tag-tit">自然</span> </a></li>
</ul>
js代码:
<script type="text/javascript">
$(function () {
//遮罩层,鼠标移动上去高度变化,变清晰
var $site_li = $(".site-tag li");
$site_li.hover(function () {
var indexs = $site_li.index(this);
$(this).css("height", "90").find(".tag-tit").css("top", "30").css("color", "#fff");
//获取当前点击li元素在全部li元素中的索引
//alert(indexs+1);
$(this).prev().css("height", "30");
$(this).next().css("height", "30");
}, function () {
$site_li.css("height", "50");
});
});
</script>
css代码:
ul li{ list-style:none;}
.site-tag{ width:200px; overflow:hidden; z-index:5;}
.site-tag li{ position:relative; width:200px; height:50px; margin-bottom:1px; overflow:hidden;
transition:height 0.5s ease; -webkit-transition:height 0.5s ease;
-moz-transition:height 0.5s ease; -o-transition:height 0.5s ease;}
.site-tag li a { color: #666; font-size: 16px; font-weight: bold;line-height: 50px;}
.site-tag li i{ display:block; height:90px; background-position:center center;
opacity:0.3; filter:alpha(opacity=3); /*设置透明度*/
-webkit-transition:opacity 0.5 ease; /**/
-webkit-filter:grayscale(60%); /**/
}
.site-tag li:hover i { opacity:0.9; -webkit-filter:grayscale(0%); transition:opacity 0.5s ease;}
.tag-tit{ display:block; height:100px; width:700px; color:#666; font-size:14px;}
.site-tag li .tag-tit{ position:absolute; top:0px; left:10px; text-shadow:1px 1px 1px rgb(0,0,0,0.1);}
a:hover .tag-tit{ text-shadow:1px 1px 1px rgb(0,0,0,0.5);}
希望本文所述对大家的javascript程序设计有所帮助。
标签:js,鼠标,方法
0
投稿
猜你喜欢
详解Go语言中单链表的使用
2024-02-01 11:55:03
Python实现JSON反序列化类对象的示例
2023-09-03 19:29:51
MySQL服务维护笔记第1/2页
2024-01-27 02:08:03
Python中json.dumps()函数的使用解析
2022-11-04 19:41:09
彻底搞懂MySQL存储过程和函数
2024-01-24 10:48:52
python实现图像外边界跟踪操作
2021-07-20 17:38:33
在asp中调用sql server的存储过程方法
2007-08-13 13:28:00
详解 Python 读写XML文件的实例
2022-05-03 23:36:15
element 结合vue 在表单验证时有值却提示错误的解决办法
2023-07-02 16:57:12
MySQL如何解决DOS窗口乱码问题
2024-01-22 11:44:56
详细总结Python类的多继承知识
2021-10-02 03:15:02
Python图像处理之透视变换的实战应用
2022-08-16 17:22:10
Python scikit-learn 做线性回归的示例代码
2022-05-03 11:00:54
python常用数据结构元组详解
2022-08-14 08:14:44
谈谈图片如何影响转换率
2011-08-10 19:14:08
pytorch中的model=model.to(device)使用说明
2023-02-23 15:07:48
python自制简易mysql连接池的实现示例
2023-04-14 20:23:55
利用div+jquery自定义滚动条样式的2种方法
2024-04-19 10:18:13
几个比较重要的MySQL变量
2024-01-23 20:22:36
python+appium自动化测试之如何控制App的启动和退出
2023-06-24 12:45:01