一个简单的jQuery鼠标悬停经过事件

最新推荐文章于 2022-12-21 17:51:19 发布

原创最新推荐文章于 2022-12-21 17:51:19 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #WEB前端

WEB前端同时被 2 个专栏收录

5 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文详细介绍了如何利用jQuery为Logo添加交互效果，当鼠标悬停时，文字网址显示下划线且透明度提升至100%，并提供了完整的代码实现。

Alex说需要再logo位置加个一个效果，需要鼠标放在LOGO上时我们的文字网址显示下划线并且文字透明度从80%提高到100%，开始先用CSS3来实现这个效果研究起来比较有难度，所以直接用jquery来实现了。

代码如下：

	<script>
		$(document).ready(function(){
		var isShow=false;
			$(".logo").mouseover(function(){
				$(".logo_span").css("opacity","1");
				$(".logo_span").css("textDecoration","underline");
				isShow=true;
			});
			$(".logo").mouseout(function(){
				if(isShow)
				{
					$(".logo_span").css("opacity","0.8");
					$(".logo_span").css("textDecoration","none");
					isShow=false;
				}   
			});
		})
	</script>