鼠标移上，内容显示

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