Change background image when hover hover over div with jQuery
Question
HTML setup
I have a setup like in the picture. I want users to hover over each red box and when the mouse is over each box, I want the background (which is now grey) to change in to a background picture. Different pics with different box. In my css I have:
#service {
background: grey;}
I wrote this jQuery code:
$service = $('#service');
$('.service-list').on('mouseover', 'div', function() {
$service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
});
but it's not working. I also want the background pics to preload because they are around 650kb so its smooth and instantaneous. I was going to make a div called preload and then do
<img src="path/image-01.png" width="1" height="1" alt="Image 01" />
and then do preload display none.. Idk if that will work. please help
edit---- just to be clear, I want to change the background of the services div background, not each of the red box background
2 answers
solution1
0 2016-10-24 10:44:54
You can achieve this by jquery hover function.
$service = $('#service');
$('.greay-box').hover(function() {
$service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
}, function(){
$service.css('background-image', '');
});
Here is a example fiddle . Hope this helps you.
solution2
0 2016-10-24 11:22:05
Hey I HOpe You Are Looking Something like this try to alter the image . using Jquery
var sourceSwap = function () { var $this = $(this); var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); } $(function () { $('img.xyz').hover(sourceSwap, sourceSwap); });
.my { width:100px; height:100px; overflow:hidden; border: 2px solid red; float:left; padding:2px; margin:2px; } .my img { min-width:100%; max-width:100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div class="row"> <div class="my"> <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" /> </div> <div class="my"> <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" /> </div> <div class="my"> <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" /> </div> <div class="my"> <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" /> </div> </div> </body> </html>
Can Check The fiddle Also. . . UPDATED FIDDLE DEMO LINK
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.