Comment changer une image qui est à l'intérieur d'un div lorsque vous survolez la div [fermé] - javascript, jquery, css

J'ai une image à l'intérieur d'un bloc div. Lorsque je survole le div, je veux que la couleur de fond de mon div change et que l'image à l'intérieur du div soit également modifiée. Comment puis-je l'obtenir?

Réponses:

Vous pouvez utiliser Jquery:

en supposant que votre html ressemble à ceci:

<div id="container">
<img src="/images/1.jpg" />
</div>

ajoutez ce script:

$(function(){
$("#container").mouseover(function() {
$(this).css("background", "yellow");
$(this).find("img").attr("src", "2.jpg");
})
})

Code HTML: -

<div class="image-cntr">
<img src="/images/oldImage.jpeg" alt="" />
</div>

Code JQuery: - utiliser hover fonction

<script type="text/javascript">
jQuery(function(){
jQuery(".image-cntr").hover(function(){
jQuery(this).find("img").attr("src", "newImage.jpeg");
},function(){
jQuery(this).find("img").attr("src", "oldImage.jpeg");
},);
});
</script>

HTML

<div id="change">
</div>

CSS

#change
{
width: 200px;
height: 150px;
background-color: blue;
background-image: url("first_image.jpeg");
}

#change:hover
{
background-color: green;
background-image: url("second_image.jpeg");