鼠标移上，内容显示

时间：2016-05-30 12:57:51 阅读：137 评论：0 收藏：0 [点我收藏+]

标签：

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

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

鼠标移上，内容显示

标签：

原文地址：http://www.cnblogs.com/147258llj/p/5542003.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行