Advertisements
When I hover the mouse over the listed elements, they show the image associated with them in the correct div, but the image of the last element on which the mouse was hovered remains visible and does not allow me to see the default image that I placed.
$("li").mouseenter(function() {
var currentImage = $(this).attr("data-cover");
$(this).parent().parent().find("img").attr("src", currentImage);
});body {
background-color: rgb(51, 51, 51);
}
.img-test {
background-color: rgb(0, 230, 12);
height: 100px;
width: 200px;
position: relative;
margin-left: 300px;
margin-top: 50px;
}
.list li {
list-style: none;
color: rgb(238, 238, 238);
font-size: 25px;
margin-top: 15px;
padding: 10px;
max-width: 500px;
background-color: rgb(76, 102, 117);
border: 1px solid rgb(155, 161, 180);
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-test"><img src="https://dummyimage.com/200x100/bfbfbf/000.jpg&text=Default+BG" alt=""></div>
<ul class="list">
<li data-cover="https://dummyimage.com/200x100/de2c2c/fff.jpg&text=A"><span>Image A</span></li>
<li data-cover="https://dummyimage.com/200x100/44679e/fff.jpg&text=B"><span>Image B</span></li>
<li data-cover="https://dummyimage.com/200x100/ffe554/000.jpg&text=C"><span>Image C</span></li>
</ul>Try using the following code to make once the mouse leaves the element the div has its background image (Defalt BG) again.
$(".list li").mouseleave(function(){
var currentImage = $(this).attr("data-cover");
$(this).parent().parent().find("img").removeAttr("src", currentImage);
});
The code does almost what I want, but the problem is that it also removes the background image (Default BG) leaving my div empty. What am I failing?
>Solution :
you have to set default image url on mouseleave.
$(document).ready(function() {
$("li").mouseenter(function() {
var currentImage = $(this).attr("data-cover");
$(this).parent().parent().find("img").attr("src", currentImage);
});
$(".list li").mouseleave(function() {
var currentImage = $(this).attr("data-cover");
$(this).parent().parent().find("img").removeAttr("src", currentImage);
$(this).parent().parent().find("img").attr("src", "https://dummyimage.com/200x100/bfbfbf/000.jpg&text=Default+BG");
});
}); body {
background-color: rgb(51, 51, 51);
}
.img-test {
background-color: rgb(0, 230, 12);
height: 100px;
width: 200px;
position: relative;
margin-left: 300px;
margin-top: 50px;
}
.list li {
list-style: none;
color: rgb(238, 238, 238);
font-size: 25px;
margin-top: 15px;
padding: 10px;
max-width: 500px;
background-color: rgb(76, 102, 117);
border: 1px solid rgb(155, 161, 180);
cursor: pointer;
}<div class="img-test"><img src="https://dummyimage.com/200x100/bfbfbf/000.jpg&text=Default+BG" alt=""></div>
<ul class="list">
<li data-cover="https://dummyimage.com/200x100/de2c2c/fff.jpg&text=A"><span>Image A</span></li>
<li data-cover="https://dummyimage.com/200x100/44679e/fff.jpg&text=B"><span>Image B</span></li>
<li data-cover="https://dummyimage.com/200x100/ffe554/000.jpg&text=C"><span>Image C</span></li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="test2.js"></script>