首页 > 代码库 > 鼠标悬浮标题切换显示出标题的文字和图片效果
鼠标悬浮标题切换显示出标题的文字和图片效果
第一种效果：
HTML结构：
<div class="vewinfor"> <div class="leftin_hd"> <h3>作者热文</h3> <a href=http://www.mamicode.com/"" target="_blank" class="in_more">...</a> </div> <div class="leftin_bd"> <ul class="auth_infor clearfix" data-mouseevent="1"> <li> <em class="auth_num auth_red">1</em> <div class="auth_txt" style="display:none;" data-mousehide="1"><a href=http://www.mamicode.com/"" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇</a></div> <div class="auth_show" style="display:block;" data-mouseshow="1"> <a href=http://www.mamicode.com/"" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a> <span>镑进行引援，但是目前范加尔的球队仍然显得非得非得非常</span> </div> </li> <li> <em class="auth_num">2</em> <div class="auth_txt" data-mousehide="1"><a href=http://www.mamicode.com/"" target="_blank">中国女排时隔16年进决赛夺银 后勤神医居功至伟</a></div> <div class="auth_show" data-mouseshow="1"> <a href=http://www.mamicode.com/"" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a> <span>镑进行引援，但是目前范加尔的球队仍然显得非得非得非常</span> </div> </li> <li> <em class="auth_num">3</em> <div class="auth_txt" data-mousehide="1"><a href=http://www.mamicode.com/"" target="_blank">美女为赢iPhone6深夜裸奔 三点全露被调侃女雷锋</a></div> <div class="auth_show" data-mouseshow="1"> <a href=http://www.mamicode.com/"" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a> <span>镑进行引援，但是目前范加尔的球队仍然显得非得非得非常</span> </div> </li> </ul> </div></div>
JS代码：
$(function(){ $(‘[data-mousehide]‘).on(‘mouseover‘,function(){ $(‘[data-mouseshow]‘).hide().siblings(‘[data-mousehide]‘).show(); $(this).siblings(‘[data-mouseshow]‘).show().siblings(‘[data-mousehide]‘).hide(); return false; });});
文件分享下载如下：baiduyunguanjia-javascript实例-20141119-鼠标悬浮标题切换显示出标题的文字和图片效果
第二种效果：
用了动画setTimeout来控制来显示，还有slideUp(),fadeIn(),增加一些动画的效果，鼠标悬浮在上面的时候停顿一段时间再显示，不过功能也是一样的；
HTML结构与上面第一种效果的HTML结构一样，只是JS不一样：
JS代码：
$(function(){ if ($(‘[data-mouseevent]‘).length && $(‘[data-mousehide]‘).length && $(‘[data-mouseshow]‘).length) { var dataMouseTimeid = ‘‘; $(‘[data-mousehide]‘).on(‘mouseover‘, function(e) { if ($(this).siblings(‘[data-mouseshow]‘).length) { var $selft = $(this); dataMouseTimeid = window.setTimeout(function(){ $selft.parents(‘[data-mouseevent]‘) .find(‘[data-mouseshow]‘).slideUp() .siblings(‘[data-mousehide]‘).show(‘fast‘, function() { $selft.hide().siblings(‘[data-mouseshow]‘).fadeIn(); }); },500); } }).on(‘mouseout‘, function(){ if (dataMouseTimeid) clearTimeout(dataMouseTimeid); }); }});
文件分享下载：baiduyunguanjia-javascript实例-20141120-鼠标悬浮标题切换显示出标题的文字和图片效果
鼠标悬浮标题切换显示出标题的文字和图片效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。