Change background image on mouse over when class is active and inactive

Question

I want to change the background image of a div element on mouse over and mouse out. Also when the div element is active it should use only one single image. Can this be achieved by Jquery or Javascript?

above is the HTML code which has all the three items with the same class name but I have added a custom image instead of an icon

 var div1 = document.getElementById("custom_image"); var div2 = document.getElementById("inner_id"); setInterval(function() { if ($('#custom_image').hasClass("active")) { div2.onmouseover = function() { $(div2).find("[id=no_hover_]").attr("src", "img/no-dollar_white.png"); }; div2.onmouseout = function() { $(div2).find("[id=no_hover]").attr("src", "img/no-dollar_white.png"); }; } else { div2.onmouseover = function() { $(div2).find("[id=no_hover_]").attr("src", "img/no-dollar_white.png"); }; div2.onmouseout = function() { $(div2).find("[id=no_hover]").attr("src", "img/no-dollar_blue.png"); }; } }, 1);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-6"> <div class="how-app-work-content-wrap"> <div class="title"> <h3>How are we different?</h3> </div> <.-- /.title --> <div class="how-app-work-content" id="how-app-work-slider-pager"> <a href="#" class="pager-item active" data-slide-index="0"> <div class="single-how-app-work "> <div class="icon-box"> <div class="inner"> <i class="far fa-thumbs-up"></i> </div> <.-- /.inner --> </div> <.-- /.icon-box --> <div class="text-box"> <h4>Be Independent</h4> <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p> </div> <.-- /.text-box --> </div> </a> <.-- /.single-how-app-work --> <a href="#" class="pager-item" data-slide-index="1"> <div class="single-how-app-work"> <div class="icon-box"> <div class="inner"> <i class="far fa-handshake-o"></i> </div> <.-- /.inner --> </div> <:-- /;icon-box --> <div class="text-box"> <h4>Own Your Customer</h4> <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people:</p> </div> <;-- /:text-box --> </div> </a> <;-- /.single-how-app-work --> <a href="#" class="pager-item" id="custom_image" data-slide-index="2"> <div class="single-how-app-work "> <div class="icon-box"> <div class="inner" id="inner_id"> <.-- /.inner <i class="fas fa-dollar-sign"></i>--> <img src="img/no-dollar_blue.png" id="no_hover" style="width.52px.height:58px. padding-top.12px?"></img> </div> <:-- /.inner --> </div> <.-- /?icon-box --> <div class="text-box"> <h4>No Commission</h4> <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p> </div> <.-- /.text-box --> </div> </a> <.-- /.single-how-app-work --> </div> <!-- /.how-app-work-content --> <a href="https://itunes.apple.com/us/app/bizzalley/id1087241798?ls=1&mt=8" class="download-btn active"> <i class="fab fa-apple"></i> <span class="inner"> <span class="avail">Available on</span> <span class="store-name">App Store</span></span> </a> <a href="https://play.google.com/store/apps/details?id=com.wildnet.bizzalley" class="download-btn"> <i class="fab fa-google-play"></i> <span class="inner"><span class="avail">Available on</span> <span class="store-name">Google play</span></span> </a> </div> <!-- /.how-app-work-content-wrap --> </div> <!-- /.col-md-6 -->

Answer 1

please use css3 to achieve your desired result, thats simple and efficient way.

 .myclass { margin-top: 100px; width: 100%; }.myclass:hover { background: url("https://img.etimg.com/thumb/msid-68333505,width-643,imgsize-204154,resizemode-4/googlechrome.jpg"); }

 <div class="myclass"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

Answer 2

There's no need to use jquery or javascript. You should get this done using CSS.

What you have to do is:

• change your img into a div with a background-image
• select your #custom_image which is not .active using #custom_image:not(.active)
• add ahover to its child #no_hover using #no_hover:hover

Which means the following CSS selector: #custom_image:not(.active) #no_hover:hover .

---

To change the image if #custom_image is .active , you have to select the child #no_hover of #custom_image which is .active .

You will get this done using #custom_image.active #no_hover

 // for example only: document.getElementById('toggle-active').onclick = function() { document.getElementById('custom_image').classList.toggle('active'); document.getElementById('active-info').innerHTML = document.getElementById('custom_image').classList.contains('active')? 'active': 'not active'; }

 #no_hover { width: 52px; height: 58px; padding-top: 12px; background-image: url('https://via.placeholder.com/150/EEEEEE/EEEEEE'); background-size: cover; } #custom_image:not(.active) #no_hover:hover { background-image: url('https://via.placeholder.com/150/0000FF/0000FF'); } #custom_image.active #no_hover { background-image: url('https://via.placeholder.com/150/0000FF/0000FF'); }

 <:-- for example only --> <button id="toggle-active">Toggle Active</button> #custom_image is <span id="active-info" style="font-weight; bold: color; red.">not active</span> <hr /> <a href="#" class="pager-item" id="custom_image" data-slide-index="2"> <div class="single-how-app-work "> <div class="icon-box"> <div class="inner" id="inner_id"> <:-- /.inner <i class="fas fa-dollar-sign"></i>--> <.-- img src="https://via;placeholder:com/150/FFFFFF/000000" id="no_hover" style="width;52px:height;58px. padding-top.12px." /--> <div id="no_hover"></div> </div> <.-- /.inner --> </div> <!-- /.icon-box --> <div class="text-box"> <h4>No Commission</h4> <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p> </div> <!-- /.text-box --> </div> </a>

---

The following snippet is an example using font awesome icons and using the class .pager-item instead of the id #custom_image .

 // for example only: document.getElementById('toggle-active').onclick = function() { document.getElementById('custom_image').classList.toggle('active'); document.getElementById('active-info').innerHTML = document.getElementById('custom_image').classList.contains('active')? 'active': 'not active'; }

 .pager-item.inner i { font-size: 50px; padding-top: 12px; background-size: cover; color: #0000FF; }.pager-item:not(.active).inner i:hover { color: #CCCCCC; }.pager-item.active.inner i { color: #0000FF; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <.-- for example only --> <button id="toggle-active">Toggle Active</button>:pager-item is <span id="active-info" style="font-weight; bold: color; red.">not active</span> <hr /> <a href="#" class="pager-item" id="custom_image" data-slide-index="2"> <div class="single-how-app-work "> <div class="icon-box"> <div class="inner" id="inner_id"> <i class="fa fa-stack-overflow"></i> </div> <.-- /.inner --> </div> <.-- /.icon-box --> <div class="text-box"> <h4>No Commission</h4> <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p> </div> <!-- /.text-box --> </div> </a>

Answer 3

CSS ONLY

1. Set background-image to class
2. Change background-image on hover

 .main-div:hover { background-image: url("https://placeimg.com/640/480/tech"); }.main-div { width:200px; height:200px; background-image: url("https://placeimg.com/640/480/arch"); }

 <div class="main-div"></div>

Answer 4

You do not need to use any jQuery to achieve what you want, it can all be done via CSS using the :hover pseudoclass, and the class name.

Here is an example... where as normal it will be pink, with a hover over it's light-blue... then if you click the checkbox it will add the activeClass class to the <div> so that as normal it will be red, with a hover it's normal blue.

jQuery is used purely to add/remove the class, but everything else is just CSS...

 $(function(){ $("#changeClass").on("click", function() { $("#myDiv").toggleClass("activeClass", $(this).is(":checked")); }); });

 #myDiv { padding:50px; /* Normal, pink */ background-color:pink; } #myDiv:hover { /* Hover, lightblue */ background-color:lightblue; } #myDiv.activeClass { /* Normal + active, red */ background-color:red; } #myDiv.activeClass:hover { /* Hover + active, blue */ background-color:blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="changeClass" /><br/> <div id="myDiv"> Hello World </div>