Блог

Я хотел показать класс car-info в slidedown, когда мышь находится над ним… и наоборот, заставьте его скользить вверх при наведении курсора мыши. Как я могу сделать это в 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

с mouseover

//смотрите мой jfiddle http://jsfiddle.net/kisspa/es3gx

Сначала вы должны включить библиотеки 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 /

Просто вариант ответа @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 */
}
  

ДЕМОНСТРАЦИЯ

Надеюсь, это удовлетворит ваши потребности.

вам нужно изменить в 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;

}
  

Обновленная скрипка

Опять же, mouseenter и mouseleave, вероятно, являются лучшими вариантами, возможно, попробуйте что-то вроде следующего:

http://jsfiddle.net/dxZ5N/

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

 $(".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/