特效1：鼠标移动到该区域则显示小图标

最新推荐文章于 2024-06-24 09:30:19 发布

just_for_your_smile

最新推荐文章于 2024-06-24 09:30:19 发布

阅读量1.6k

点赞数

分类专栏： html 与 css 与js 与jquary

本文链接：https://blog.youkuaiyun.com/just_for_your_smile/article/details/52026778

版权

html 与 css 与js 与jquary 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用jQuery、CSS和HTML结合实现的特效：当鼠标移到特定区域时，该区域会显示一个可点击的小图标。通过这种方法，可以增加交互性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

特效1：鼠标滑动到某区域，则该区域的指定地方出现一个可以点击的小图标；

实现方法： jquary + css + html

实现代码：

（1）css部分
.info_edit_show_pic{
	position:absolute;
	bottom:2px;
	left:40%;
	width:35px;
	height:35px;
	background:#FFF;
	border-radius:17.5px;
	display:none;

}

.info_edit_show_pic img{
	height:70%;
	width:70%;
	display:block;
	margin:5px auto;
}

.info_user_img{
	display:block;
	position:relative;
	
}

（2）jquary部分
<script type="text/javascript">

$(document).ready(function(){
	 $('.move111').mouseover(function(){ //鼠标覆盖事件
	    $('.info_edit_show_pic').css("display","block"); //改变它的css，使它显示
	 });
	 $('.move111').mouseout(function(){  //鼠标移走事件
		    $('.info_edit_show_pic').css("display","none"); //改变它的css，使它隐藏
		 });
})
	
</script>

（3）html部分
<dt class="move111">			        
   <a  href="#" >
       <span class = "info_user_img"> <img src="优快云_files/1_just_for_your_smile.jpg" class="header"></span>   
      <span class = "info_edit_show_pic"><img src = "image/edit.png" ></span>
 </a>
</dt>