jQuery: заменить изображение на div на hover

Question

Надеюсь, есть кто-нибудь, кто может мне помочь! :)

Я написал небольшой скрипт Jquery заменяющего всех IMG тегов на моем сайте с DIV тегов. Я беру источник изображения как фоновое изображение divs и ширину и высоту изображения как ширину и высоту div. Это прекрасно работает.

Теперь я хочу, чтобы заменить DIV (уага nohover) с другим DIV (вара парения) при наведении курсора мыши и обратно в первый DIV (уага nohover) на отведении указателя мыши. Как я могу это достичь? Я умираю здесь.

спасибо заранее и привет от Германии!

очень люблю!

Яро

$(document).ready(function() { 
 
    $('.container img').each(function() { 
 
    var $img = $(this), 
 
     href = $img.attr('src'); 
 
    width = $img.attr('width'); 
 
    height = $img.attr('height'); 
 
    wbgclass = $img.attr("class"); 
 

 
    var nohover = '<div class="wbg-image-container ' + wbgclass + '" style="width: ' + width + 'px; height: ' + height + 'px;"><div class="wbg-image" style="background-image: -webkit-linear-gradient(rgba(255, 255, 253, 0.4), rgba(255, 255, 253, 0.4)), url(' + href + '); background-image: linear-gradient(rgba(255, 255, 253, 0.4), rgba(255, 255, 253, 0.4)), url(' + href + '); background-size: auto, cover;"></div></div>'; 
 

 
    var hover = '<div class="wbg-image-container ' + wbgclass + '" style="width: ' + width + 'px; height: ' + height + 'px;"><div class="wbg-image" style="background-image: url(' + href + '); background-image: url(' + href + '); background-size: auto, cover;"></div></div>'; 
 

 
    $img.replaceWith(nohover); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <img src="soz.jpg" width="269" height="358" alt="" /> 
 
</div>

Answer 1

Использование Jquery .hover() метод:

$img.hover(function() { 
    $('.container').html(hover); 
}); 

Here is a codepen demonstrating the .hover() functionality

Если вы хотите быть более точным вы можете также использовать .mouseenter() и .mouseleave() как .hover() метод работает на обоих .mouseenter() и .mouseleave()

Так что ваши методы будут выглядеть следующим образом:

$img.mouseenter(function() { 
    $('.container').html(hover); 
}); 

$img.mouseleave(function() { 
    $('.container').html(nohover); 
}); 

Answer 2

Используйте комбинацию из mouseover и mouseout событий. Также помещайте элемент img внутри родительского элемента, когда вы заменяете содержимое и привязываете события к контейнеру.

Вот грубый пример того, что вы могли бы сделать ..

var href, 
width, 
height, 
wbgclass; 

$('.item').on('mouseover', function (e) { 
    var $this = $(this); 
    href = $('img', $this).attr('src'); 
    width = $('img', $this).attr('width'); 
    height = $('img', $this).attr('height'); 
    wbgclass = $('img', $this).attr("class"); 



    var hover = '<div class="wbg-image-container ' + wbgclass + '" style="width: ' + width + 'px; height: ' + height + 'px;"><div class="wbg-image" style="background-image: url(' + href + '); background-image: url(' + href + '); background-size: auto, cover;"></div></div>'; 


}); 


$('.item').on('mouseout', function (e) { 
    var nohover = '<div class="wbg-image-container ' + wbgclass + '" style="width: ' + width + 'px; height: ' + height + 'px;"><div class="wbg-image" style="background-image: -webkit-linear-gradient(rgba(255, 255, 253, 0.4), rgba(255, 255, 253, 0.4)), url(' + href + '); background-image: linear-gradient(rgba(255, 255, 253, 0.4), rgba(255, 255, 253, 0.4)), url(' + href + '); background-size: auto, cover;"></div></div>'; 

    $(this).replaceWith(nohover); 
}); 

Check Fiddle