Question

当鼠标悬停在幻灯片上时，我想显示一个汽车信息类......相反，它会在鼠标移开时向上滑动。我怎么能在jquery中做到这一点？

 $(".items .title-bar").on("mouseover",this, function () {
        //how use car-info slide down
  });
  $(".items .title-bar").on("mouseout",this, function () {
        //i wanted  .title-bar and .car-info .. mouseout event and .car-info is slideup

});

在mouseover

之前

enter image description here

mouseover

enter image description here

//查看我的jfiddle http://jsfiddle.net/kisspa/es3gx/

Answer 1

首先你应该包含jQuery库，然后有几个错误（JS和CSS）。

看这里：

$(".items .title-bar").on("mouseover", function () {
        $(this).closest(".items").find(".car-info").slideDown(); //@Vedant Terkar edit
});
$(".items .title-bar").on("mouseout", function () {
        $(this).closest(".items").find(".car-info").slideUp();   //@Vedant Terkar edit
});

在CSS中你应该删除z-index，并使用 display 属性隐藏框：

.car-info{
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 15px 10px;
    text-align: justify;
    display: none;    
}

这里的小提琴演示：http://jsfiddle.net/es3gx/5/

Answer 2

只是变形的@pumpkinzzz答案，

此处仅slideUp / slideDown相关的div。

使用：

$(".items .title-bar").on("mouseover", function () {
        $(this).closest(".items").find(".car-info").slideDown();  // .closest means nearest parent with that attribute and .find means child within that parent with specified attribute.
            //how use car-info slide down
});
$(".items .title-bar").on("mouseout", function () {
            $(this).closest(".items").find(".car-info").slideUp();
});

这是Fiddle。

另外根据您的评论，我创建了一个新的Fiddle

我已将z-index和position:absolute添加到各种元素中。所以这是您更改的css：

.car-info{
    background-color: rgba(255,255,255,0.5); /* changed for attractiveness */
    border: 1px solid #ccc;
    padding: 15px 10px;
    text-align: justify;
    display: none;
    position:relative;
    z-index:10;  /* Added to float car-info on car-image */   
    height:270px;
    overflow:auto;
    clear:both;
}
.photos-wrap{
    border-bottom:1px solid #ccc;
    height:300px;
    position:absolute; /* Added to Absolutely position car-photo beneath car-info */ 
    top:62px;
    left:0px;
    z-index:5; /* Added to float car-info on car-image  Any value< z-index of .car-info is acceptable */ 
    display:inline-block; /* Just changed */
}

DEMO

希望它满足您的需求。

Answer 3

您需要更改css和jquery

$(".items .title-bar").on("mouseenter",this, function () {
            //how use car-info slide down
    console.log($(this).next());
    $(this).next().slideDown();
});
$(".items .title-bar").on("mouseleave",this, function () {
            //how use car-info slide up
    $(this).next().slideUp();
});

CSS

.car-info{
    background-color: #fff;
    border: 1px solid #ccc;

    padding: 15px 10px;

    text-align: justify;
    z-index: -1;
    display:none;

}

Updated fiddle

Answer 4

再次，mouseenter和mouseleave可能是最好的选择，可能会尝试以下内容：

http://jsfiddle.net/dxZ5N/

$( ".items" ).mouseenter(function() {
    $(this).find(".photos-wrap").slideDown();
  })
  .mouseleave(function() {
    $(this).find(".photos-wrap").slideUp();
  });

Answer 5

$(".items .title-bar").hover(function () {
        $(this).next('div.car-info').slideDown(700);
            //how use car-info slide down
}, function () {
             $(this).next('div.car-info').slideUp(700);
});

演示：

http://jsfiddle.net/WLAup/

如何使用滑动和滑动jquery

5 个答案: