鼠标悬浮标题切换显示出标题的文字和图片效果

第一种效果：

HTML结构：

<div class="vewinfor">
        <div class="leftin_hd">
            <h3>作者热文</h3>
         <a href="" 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="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇</a></div>
                  <div class="auth_show" style="display:block;" data-mouseshow="1">
                       <a href="" 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="" target="_blank">中国女排时隔16年进决赛夺银 后勤神医居功至伟</a></div>
                  <div class="auth_show" data-mouseshow="1">
                       <a href="" 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="" target="_blank">美女为赢iPhone6深夜裸奔 三点全露被调侃女雷锋</a></div>
                  <div class="auth_show" data-mouseshow="1">
                       <a href="" 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-鼠标悬浮标题切换显示出标题的文字和图片效果