Наведите указатель мыши на изображение, чтобы отобразить кнопки и не вызывать его при наведении курсора на реальные кнопки. - PullRequest
Новая
       2

Наведите указатель мыши на изображение, чтобы отобразить кнопки и не вызывать его при наведении курсора на реальные кнопки.

8 голосов
/ 16 октября 2010

Я пытаюсь заставить кнопки появляться при наведении на изображение.Работает следующее: 


    jQuery('.show-image').mouseenter(function() {
 jQuery('.the-buttons').animate({
  opacity: 1
 }, 1500);
}).mouseout(function() {
 jQuery('.the-buttons').animate({
  opacity: 0
 }, 1500); 
});

Однако при переходе от изображения к кнопке (над изображением) срабатывает наведение мыши / ввод мыши, поэтому кнопки исчезают, а затем снова исчезают (кнопкииметь тот же класс, что и изображение, иначе они просто исчезнут).Как я могу предотвратить это?Я также попробовал приведенный выше код с помощью наведения jQuery;те же результаты.Вот деталь изображения, показывающего кнопку с непрозрачностью 1 (потому что я поверх изображения):

http://i.stack.imgur.com/egeVq.png

Заранее спасибо за любые предложения.

Ответы [ 2 ]

8 голосов
/ 16 октября 2010

Самое простое решение - поместить обоих в одного и того же родителя div и дать родителю div класс show-image.

Мне нравится использовать .hover(), чтобы сохранить несколько нажатий клавиш. (все, что делает hover - это .mouseenter() и .mouseleave(), но вам не нужно их печатать)

Кроме того, очень важно исчезнуть $(this).find(".the-buttons"), так что вы можете менять только кнопку в зависании над div, иначе вы изменили бы все .the-buttons на всей странице! .find() просто ищет потомков.

Наконец, .animate() будет работать, но почему бы просто не использовать .fadeIn() и .fadeOut()

JS: 

jQuery(function() {                                              // <== Doc ready

    jQuery(".the-buttons").hide();                  // Initially hide all buttons

    jQuery('.show-image').hover(function() {
         jQuery(this).find('.the-buttons').fadeIn(1500);         // use .find() !
    }, function() {
        jQuery(this).find('.the-buttons').fadeOut(1500);         // use .find() !
    });
});

Попробуйте это с помощью jsFiddle

HTML: - как-то так 

<div class="show-image">
    <img src="http://i.stack.imgur.com/egeVq.png" />
    <input class="the-buttons" type="button" value=" Click " />
</div>​

CSS: - Примерно так. Ваш, скорее всего, будет другим. 

div {
    position: relative;
    float:left;
    margin:5px;}
div input {
    position:absolute;
    top:0;
    left:0; }​
3 голосов
/ 16 октября 2010

Поместите изображение и кнопку в один div, затем поместите события mouseover / mouseout в div.Если ваша мышь находится над кнопкой или над изображением, она все равно будет над элементом div.

Также я не уверен, будет ли работать mouseenter(...).mouseout(...).Я всегда использую hover(..., ...)

...