Наложение на определенное изображение при наведении

0

У меня есть 2 div с одним и тем же классом "wrap", когда я нахожусь на этом div, я хочу отображать оверлей на этом конкретном div, который я висел

Вот что я пробовал

<div class="wrap" style="display:inline-block">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTQ3aCNvaNCCoxQWqb6PZS1MZZjED5umfE0OPhfjnKsYY8BTSOKY3cIBHzj"  alt="RF1"  class="company-image" />            
            <div class="Image-Overlay"></div>
        </div>
        <div class="wrap" style="display:inline-block">
                     <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTQ3aCNvaNCCoxQWqb6PZS1MZZjED5umfE0OPhfjnKsYY8BTSOKY3cIBHzj"  alt="RF2"  class="company-image" />            
                     <div class="Image-Overlay"></div>
               </div>

и вот мой сценарий

<script type="text/javascript">
    $(document).ready(function () {

        $('.wrap').mouseover(function () {
            var x=$(this)
            debugger;
            $('.Image-Overlay').show();                
        }).mouseout(function () {
            $('.Image-Overlay').hide();
        });
    })

</script>

и мои стили

<style>
    .Image-Overlay {
        width: 284px;
        height: 177px;
        background-color: #4baad3;
        z-index: 1;
        opacity: 1;
        position: fixed;
        top: 0.5em;
        display: none;
    }

    .company-image {
    }
</style>
Теги:

4 ответа

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

Из того, что я понимаю, вы хотите, чтобы соответствующий оверлей отображался поверх изображения при наведении на изображение.

Важно, чтобы родительский элемент располагался относительно, а дочерний элемент (div hover) располагался абсолютно относительно этого родителя. Изменения в коде CSS ниже позаботятся об этом.

См. Демонстрацию здесь: http://jsfiddle.net/C7RPZ/1/

CSS:

.wrap {
    position: relative;
    width: 284px;
    height: 177px;
    display: inline-block;
}    

.Image-Overlay {
    width: 284px;
    height: 177px;
    background-color: #4baad3;
    z-index: 100;
    opacity: 1;
    display: none;
    position: absolute;
    top: 0;
}

.company-image {
    z-index: 0;
}

JavaScript:

$(document).ready(function () {
    $('.wrap').mouseover(function () {
        $('.Image-Overlay', this).show();                
    }).mouseout(function () {
        $('.Image-Overlay', this).hide();
    });
});

Чистое решение для CSS

Обновление: во-вторых, вам не нужен JavaScript вообще, учитывая описанную область проблемы. Вы можете отказаться от JavaScript и добавить следующий CSS в CSS, представленный выше, в котором будет отображаться оверлей при зависании родительского элемента (см. Демо здесь: http://jsfiddle.net/C7RPZ/2/).

.wrap:hover > .Image-Overlay {
    display: inline;
}
Поделиться
0

В качестве альтернативы вы также можете сделать это только с CSS, поскольку методы show() и hide() просто изменяют свойство отображения. В любом случае, ваше решение для скрипта не будет работать без таргетинга на ту, которую вы наводите.

Только CSS-решение

    .wrap {
        position: relative;
        display: inline-block;
        margin-top: 10px;
    }
    .wrap:first-child {
        margin-top:0;
    } 
    .wrap img {
        display: block;
    }
    .wrap .Image-Overlay {
         background-color: #4baad3;
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         visibility: hidden;
        }
    .wrap:hover .Image-Overlay {
        visibility: visible;
        opacity: 0.6;
    }

http://jsfiddle.net/Bm5xL/38/

Поделиться
0

вот решение.

  $(document).ready(function () {

        $('.wrap').mouseover(function () {
            var x=$(this)
            debugger;
            $('.Image-Overlay', this).show(0);                
        }).mouseout(function () {
            $('.Image-Overlay', this).hide(0);
        });
    })

Вот ДЕМО.. http://jsfiddle.net/9R9br/3/

Поделиться
0

Вы хотите что-то вроде этого:

JQuery:

$(document).ready(function () {

    $('.wrap').mouseover(function () {
        $(this).find('.Image-Overlay').show();
    }).mouseout(function () {
        $(this).find('.Image-Overlay').hide();
    });
})

Таким образом, вы используете $(this) чтобы найти то, на что было .find и затем .find чтобы получить класс .Image-Overlay под этим div ($(this)).

ДЕМО ЗДЕСЬ

Поделиться
  • 0
    Объясните отрицательный голос? Это не плохой способ сделать это ...
  • 0
    Спасибо но скрипка не работает но скрипт работает нормально
Показать ещё 11 комментариев

Ещё вопросы

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