Div पर होवर करते समय एक div के अंदर एक छवि को कैसे बदलें [बंद] - जावास्क्रिप्ट, jquery, css

मैं एक div ब्लॉक के अंदर एक छवि है। जब मैं div पर मंडराता हूं तो मैं चाहता हूं कि मेरी डिव बैकग्राउंड का रंग बदल जाए और साथ ही डिव के अंदर की इमेज भी बदल दी जाए। मुझे यह कैसे मिल सकता है?

उत्तर:

आप Jquery का उपयोग कर सकते हैं:

यह मानते हुए कि आपका HTML कुछ इस तरह दिखता है:

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

यह स्क्रिप्ट जोड़ें:

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

HTML कोड: -

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

JQuery कोड: - उपयोग hover समारोह

<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>

एचटीएमएल

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

सीएसएस

#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");