Показать div в Image hover?

0

Я пытаюсь получить что-то вроде эффекта, который вы видите, когда вы создаете изображение в этом примере: ссылка.

Когда вы нарисовываете изображение, над изображением отображается div, как только вы вытаскиваете div, div спрятан.

Размер изображения: 920x300

Я не повезло:

$('.my-img').hover(function(){
    $('.my-div').animate({left: '0px'}, 1000)
}, function(){
    $('.my-div').animate({left: '-920px'}, 1000)
});

Дополнительная информация для css и html:

    .my-wrapper{
        position: relative;
    }

    .my-div{
        position: absolute;
        background: red;
        height: 300px;
        width: 920px;
        left: -920px;

    }

<div class="my-wrapper">
<div class="my-div">some text here</div>
<img ... /img>
</div>
  • 1
    ты можешь создать скрипку ??
  • 0
    .my-div !== .info-cliente и как насчет структуры html.
Показать ещё 3 комментария
Теги:
animation

2 ответа

1
Лучший ответ

Добавить контейнер для моего div

<div class="rel-wrap">
    <img src="http://placekitten.com/g/920/300" width="920" height="300" class="my-img">
    <div class="my-div">
        Redbox
    </div>
</div>

Установить позицию как относительную для контейнера

.rel-wrap {
    position:relative;
    width:920px;
    height:300px;
    border: solid 1px #ccc;
}

и примените верхний и левый к моему-div

.my-div{
        position: absolute;
        background: red;
        width: 920px;
        height: 300px;
        left: -940px; /*a little far left than the required block*/
        top: 0px;
}

Я добавил задержку 1 секунду в анимации (до обратного вызова).

$(document).ready(function(e) {
    $('.my-img').hover(function(){
        $('.my-div').animate({left: '0px'}, 1000)
        }, function(){
        $('.my-div').delay( 1000).animate({left: '-940px'}, 1000)
    });
});

Код: http://jsfiddle.net/babumxx/Y4wC4/8/

Предпросмотр: fiddle.jshell.net/babumxx/Y4wC4/8/show/

Вы также можете сделать это в двух частях. Показать на мышицентре и скрыть на выводе

$(document).ready(function(e) {
    $('.my-img').mouseenter(function(){
        $('.my-div').animate({left: '0px'}, 1000);
    });
    $('.my-img').mouseout(function(){
        $('.my-div').delay( 1000).animate({left: '-940px'}, 1000);
    }); 
});

Сценарий здесь: jsfiddle.net/babumxx/Y4wC4/9/

Поскольку вы хотите сохранить redblock, вы можете применить мышь к контейнеру, и это решит эту проблему. - Сценарий: http://jsfiddle.net/babumxx/Y4wC4/10/

$(document).ready(function(e) {
    $('.my-img').mouseenter(function(){
        $('.my-div').animate({left: '0px'}, 1000);
    });

    //Trigger hide, when mouse leaves rel-wrap
    $('.rel-wrap').mouseleave(function(){
        $('.my-div').delay( 1000).animate({left: '-940px'}, 1000);
    }); 
});

Надеюсь это поможет.

Поделиться
  • 0
    В скрипте я вижу ту же проблему, что и мой код. Как только my-div показывается, просто наведите указатель мыши на my-div и вы увидите, что my-div снова скрыт. Это неправильно, оно должно быть скрыто, когда указатель перемещается.
  • 0
    Поскольку вы хотите, чтобы красный блок оставался устойчивым, вы можете скрыть my-div на мыши из контейнера, и это решит эту проблему. $ ('. rel-wrap'). mouseleave (скрыть блок);
0

Измените div css следующим образом и повторите попытку:

.my-div { position: relative; }
Поделиться
  • 0
    не работает, я просто обновил вопрос и вставил CSS, который я использую для .my-div прямо сейчас.
  • 0
    @chefnelone Ваш код, кажется, работает .. Fiddle
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню