I'm attempting to change the background image of the body element on a webpage when I hover over links with data-* attributes. It's working perfectly, but I can't seem to figure out how to create a smooth fade between the images when a link is hovered over. Here is my code:
$(document).ready(function() {
$('.link').hover(
function() {
var bg = $(this).data('fond');
// alert(bg);
$('body').css("backgroundImage", 'url(' + bg + ')');
},
function () {
$('body').css("backgroundImage", 'url(http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg)');
}
);
});body {
margin:0;
background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
background-repeat: no-repeat;
background-size: cover;
transition: all 1s;
}
header {
width: 50%;
margin: 50px auto;
}
h1 {
text-align: center;
}
nav {
position: absolute;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
nav ul {
padding: 50px;
background-color: rgba(0, 0, 0, 0.95);
}
nav ul li {
display: inline-block;
padding: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}<header>
<h1>Hover a link, bro</h1>
</header>
<!-- Main -->
<main>
<nav class="main-nav">
<ul>
<li data-fond ="img/belharra.jpg" class="link"><a href="#">Belharra</a></li>
<li data-fond ="img/jaws.jpg" class="link"><a href="#">Jaws</a></li>
<li data-fond ="img/mavericks.jpg" class="link"><a href="#">Mavericks</a></li>
<li data-fond ="img/nazare.jpg" class="link"><a href="#">Nazare</a></li>
<li data-fond ="img/teahupoo.jpg" class="link"><a href="#">Teahuppo</a></li>
</ul>
</nav>
</main>Bonus: Can anyone explain to me why I had to use a separate function when the mouse leaves a link in order to restore the body's original background image? I thought the .hover() method automatically toggles the targeted element...
The .hover() method binds handlers for both the mouseenter and mouseleave events. You can use it to simply apply behavior to an element while the mouse is within the element.
Thank you so much for your assistance!