鼠标移上，内容显示

Posted 夜未央leo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标移上，内容显示相关的知识，希望对你有一定的参考价值。

1，单纯显示文本内容：

          html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>实现两边固定宽度,中间自适应宽度-</title> 
 <script src="jquery-2.2.3.min.js"></script>
  <script src="style.js" type="text/javascript"></script>
</head> 
 
<body> 
      <div class="a"> 鼠标移到A上  </div>

      <div class="b" style="display:none;"> A 显示出来 </div>
    
</body> 
</html>
View Code

     

         JS代码：

       var isHover = false;
     $(function() {
    $(".a").hover(function() {
        isHover = true;
        $(".b").show();
    }, function() {
        isHover = false;
        setTimeout(function() {
            if (!isHover) {
                $(".b").fadeOut();
            }
        }, 10);
    });
    $(".b").hover(function() {
        isHover = true;
    }, function() {
        isHover = false;
        $(".b").fadeOut();
    });
});
View Code

 

2，带图片变化

       效果图：

     

     HTML代码：      

<div class="buy_car fl">
    <img src="images/shopcar.png" class="buy_car_img fr"/>
    <div class="buy_car_spec">
          <p></p>
    </div>
</div>
View Code

   CSS代码：   

 .buy_car{
     margin-left: 20px;
     cursor: pointer;
     overflow: hidden;
 }
 .buy_car_spec{
     width: 320px;
     height: 0px;
     background: #fff;
     position: absolute;
     left: -120px;
     top: 40px;
     z-index: 3;
     box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
 .buy_car_spec p{
     text-align: center;
     line-height: 100px;
     font-size: 12px;
     color: black;
 }
View Code

 

   JS代码：

$(function() {
    //购物车切换图片
    var isHover = false
    var timer1 = null;
    $(".buy_car_img").hover(function() {
        isHover = true;
        $(".buy_car_img").attr("src", "images/shopcarhover.png");
        $(".buy_car_spec").animate({
            height: 100
        }, 200, function() {
            $(".buy_car p").html("购物车中还没有商品，赶紧选购吧！");
        });
    }, function() {
        isHover = false;
        $(this).stop(timer1);
        timer1 = setTimeout(function() {
            if (!isHover) {
                $(".buy_car_spec").animate({
                    height: 0
                }, 200, function() {
                    $(".buy_car p").html("");
                });
                $(".buy_car_img").attr("src", "images/shopcar.png");
            }
        }, 200);
    });
    $(".buy_car_spec").hover(function() {
        isHover = true;
        $(".buy_car_img").attr("src", "images/shopcarhover.png");
        $(".buy_car_spec").animate({
            height: 100
        }, 200, function() {
            $(".buy_car p").html("购物车中还没有商品，赶紧选购吧！");
        });
    }, function() {
        isHover = false;
        $(this).stop(timer1);
        timer1 = setTimeout(function() {
            if (!isHover) {
                $(".buy_car_spec").animate({
                    height: 0
                }, 200, function() {
                    $(".buy_car p").html("");
                });
                $(".buy_car_img").attr("src", "images/shopcar.png");
            }
        }, 200);
    });
View Code

 

 

   

    

以上是关于鼠标移上，内容显示的主要内容，如果未能解决你的问题，请参考以下文章

jquery中鼠标移上和移开的动作是啥？

求wpf代码，鼠标移上列表某列单元格时，用tooltips展示与该单元格数据相关的一个列表（数据是个一集合）

CSS 怎样让文本框里的字超过字数后，可以缩略显示变成点，当鼠标移上后又会全部显示出来

鼠标移上与移出事件

给图片添加属性：鼠标移上后变小手并且跳转到指定的url

其他样式属性