html怎么把鼠标放在图片上的数字上会切换图片
2015-11-09 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
原理：使所有的图片隐藏然后控制对应的图片显示。
初始化：现将所有的图片隐藏控制第一张显示。（可通过css实现）。
过程：当鼠标经过数字的时候，先控制所有的图片全部隐藏，控制数字对应的图片显示即可。
<ul id="img">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
<ul id="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
$("#img li").css("display","none");//初始化隐藏全部的图片
$("#img li:eq(0)").css("display","block");//只显示第一个图片
$("#num li").mousemove(function(){//当鼠标经过数字
$("#img li").css("display","none");//隐藏全部的图片
$("#img li:eq("+$(this).index()+")").css("display","block");//数字对应的图片显示
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
多种方法都可以实现的~js是一种，css是一种~js使用mouseover鼠标事件，如：<ahref="#"onmouseover="this.style.background='url(/images/1.jpg)no-repeatcentertop;'"onmouseoutr="this.style.background='url(/images/2.jpg)no-repeatcentertop;'">首页<a/>这个代码比较多的话，也可以使用不同的css选择器：如:html部分：<ahref="#"onmouseover="this.className='hover'"onmouseoutr="this.className='a'">首页<a/>然后用css定义两个选择器的样式就可以了~~a{}hover{}你也可以使用css，如：html部分：<ahref="#">首页</a>css部分：a{display:inline-block;width:100px;height:40px;}/*一般最好给他宽高度*/a:hover{background:url(images/bg.jpg)no-repeatcentertop;}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
多种方法都可以实现的~js是一种，css是一种~js使用mouseover鼠标事件，如：<ahref="#"onmouseover="this.style.background='url(/images/1.jpg)no-repeatcentertop;'"onmouseoutr="this.style.background='url(/images/2.jpg)no-repeatcentertop;'">首页<a/>这个代码比较多的话，也可以使用不同的css选择器：如:html部分：<ahref="#"onmouseover="this.className='hover'"onmouseoutr="this.className='a'">首页<a/>然后用css定义两个选择器的样式就可以了~~a{}hover{}你也可以使用css，如：html部分：<ahref="#">首页</a>css部分：a{display:inline-block;width:100px;height:40px;}/*一般最好给他宽高度*/a:hover{background:url(images/bg.jpg)no-repeatcentertop;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
