How to change the images with the hover color?

The problem this page has 9 images, about the hover color under the pictures, the picture needs to change, have done so
<div class="col-md-4">
 <div class="holder"> 
 <a href="#cart_tovara_1" class="buttons">
 <div class="tovar">
 <img src="/imag/catalog/001/bel.jpg" alt="Fytbolkin">
 <span class="knop_zakazat">Order</span>
 <div class="tovar_info">
 the <h3>is No one but us</h3>
 840<i class="fa fa-rub" aria-hidden="true"></i>
</div>
 <div class="blok_color_mini">
the <ul>
 <li tkey="white" data-title="white" class="active" data-url="imag/catalog/001/bel.jpg"><span style="background:#FFFFFF;"></span></li>
 <li tkey="blue" data-title="blue color" data-url="imag/catalog/001/sin.jpg"><span style="background:#1400ad;"></span></li>
 <li tkey="green" data-title="green" data-url="imag/catalog/001/zel.jpg"><span style="background:#10c81d;"></span></li>
 <li tkey="lightgray" data-title="Grey" data-url="imag/catalog/001/ser.jpg">
</li></ul>
 </div> 
 </div> 
</a>
</div>
</div>

 <div class="col-md-4">
 <div class="holder"> 
 <a href="#cart_tovara_2" class="buttons">
 <div class="tovar">
 <img src="/imag/catalog/002/ser.jpg">
 <span class="knop_zakazat">Order</span>
 <div class="tovar_info">
 the <h3>God With us</h3>
 770<i class="fa fa-rub" aria-hidden="true"></i>
</div>
 <div class="blok_color_mini">
the <ul>
 <li tkey="white" data-title="white color" data-url="imag/catalog/002/bel.jpg"><span style="background:#FFFFFF;"></span></li>
 <li tkey="green" data-title="green" data-url="imag/catalog/002/zel.jpg"><span style="background:#10c81d;"></span></li>
 <li tkey="lightgray" class="active" data-title="Grey" data-url="imag/catalog/002/ser.jpg"><span style="background:#b0b0b0;"></span></li>
</ul>
</div>
 </div> 
</a>
</div>
</div>
Etc.

$(".blok_color_mini>ul>li").hover(function() {
 $(".white img:first").attr("src", $(this).data("url"));
 });


But when you hover over any color, the picture is changing all at once, or if you add :first only change at first. How to do?

This is what happens
3bceb53a805740b691c4ad1018220af4.png5a3ffc2107a84a4287b940d046d95c4c.png
July 9th 19 at 10:18
3 answers
July 9th 19 at 10:20
Solution
$(".blok_color_mini>ul>li").hover(function(e) {
 $(e.target).closest("img").attr("src", $(this).data("url"));
 });

like so should work

If something doesn't work, see the documentation for closest and sort it out themselves :)
https://api.jquery.com/closest/
and just do better to hang one on lisener DEVCO in which all goods and according to the event.target parse inside.
And then you have a way of hanging a bunch of the same listerv.

And I don't remember why, but it seems better instead .click/.hover write .on('click', function() {})/.on('hover', function() {}) - antonetta.Collins commented on July 9th 19 at 10:23
$(".blok_color_mini>ul>li").hover(function() {
$(this).closest("img").attr("src", $(this).data("url"));
});
Does not plow.

All products in the same divi and just didn't write here. Only mind is not enough how to put. - nikita.Stracke commented on July 9th 19 at 10:26
don't know what you have there in this.
but I have such markup responds that is necessary.
try using e.target, the answer has been edited - antonetta.Collins commented on July 9th 19 at 10:29
: added link to documentation.
closest - this is what you need, another problem is that I can not completely penetrated into your layout. - antonetta.Collins commented on July 9th 19 at 10:32
: thanks!
looked concluded rewrote
$(.blok_color_mini>ul>li).on( "hover", function( event ) {
$( event.target ).closest( ".vetrina img" ).attr("src", $(this).data("url"));
});
.vetrina is the div where all items
But exactly what is wrong. Be so kind to see if I missed something. Just 24 hours on this I think the head is not my - nikita.Stracke commented on July 9th 19 at 10:35
: "something is wrong" is not a definition)
what exactly is wrong? - antonetta.Collins commented on July 9th 19 at 10:38
: not working - nikita.Stracke commented on July 9th 19 at 10:41
: this is not the answer)
there is a debugger, at least console.log. Otherwise I can't your "description" to understand what is not working, and why.
and you should not need to write ".vetrina img". You can just write "img", but if izobrajenii will be more, then add the desired class, for example:

and then look for closest('.changable') - antonetta.Collins commented on July 9th 19 at 10:44
: duck what's the error.
put debugger in listener, make sure that all the selectors chose the right DOM elements and attributes.

do Ala:
debugger;
var el = $(e.target);
var image = el.closest('img');
var newSrc = $(e.target).data("url");
image.attr('src', newSrc);

and step view whether placed in the corresponding variables. No - there in the debugger watch check and search selectors. - antonetta.Collins commented on July 9th 19 at 10:47
: it's working?
figured out what the problem was? - antonetta.Collins commented on July 9th 19 at 10:50
: only if worked - would be a nice box for the answer ;) - antonetta.Collins commented on July 9th 19 at 10:53
I can not, soon uplus on the side, stupid. But they put a tick. - nikita.Stracke commented on July 9th 19 at 10:56
: Ala writes object object - nikita.Stracke commented on July 9th 19 at 10:59
July 9th 19 at 10:22
Mm than to deal with complex subordination css easier to sketch a simple function in JS.
July 9th 19 at 10:24

Find more questions by tags jQuery