Background image change on hover of a different div
Question
i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
THIS is what i have so far: ( i tried using javascript, as i was told to, but it's not working for some reason!) jsfiddle.net
AS of right now i have the javascript on the head of my html, like this:
<head>
<script>
$('#hover').hover(function() {
$('body').removeClass('nohover').addClass('hover');
}, function(){
$('body').addClass('nohover').removeClass('hover');
});
</script>
</head>
and THIS is what i wanted to show up when the COCONUT is HOVERED: http://i.stack.imgur.com/ek98U.jpg
4 answers
solution1
2 2013-07-23 15:39:55
Your #hover element needs to have a background-color or image or something that allows it to be hoverable.
#hover {
/* your styles ... */
background-color:#fff; /* or something */
}
Also, yes, be sure that you've selected jQuery in the Frameworks & Extensions sidebar.
solution2
1 2013-07-23 15:39:11
Answer updated based on OP comments
In your jsFiddle you need to pick the JQuery library. Your code works just fine.
On the Frameworks & Extensions chose one of the JQuery libraries from the top dropown box.
To extend my answer, I think your code is more complicated than it needs to be. Here's a revised (and simplified) version:
HTML
<div id="coconut"></div>
CSS
body {
background-image:url('http://s5.postimg.org/6qbplw2xj/Background_main.jpg');
background-position:top center;
background-repeat: no-repeat;
background-color:black;
height:800px;
width:800px;
}
#coconut {
position:absolute;
width:450px;
height:400px;
top:300px;
right:20px;
border: 2px solid red;
}
.hover {
background-image:url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
}
JQuery
$('#coconut').hover(function() {
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
Fiddle: http://jsfiddle.net/wQdVv/7/
solution3
0 2013-07-23 15:45:35
Use the :hover pseudoclass instead of jQuery.
#hover:hover {
/* your code */
}
And also, for transparent images you should use .png , not .jpg .
solution4
0 ACCPTED 2013-07-23 16:30:46
Thank you, @gvee, i got it to work on my jsfiddle but it doesnt work on my website :( I added the jquery library from google, but nothing happens when i hover the coconut :( – @rafacardosoc
I think this is probably because jsFiddle adds a little extra code for you that you're not realising.
Here's a complete html script for you to use. Pay particular attention do the bit starting with $(document).ready(...
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#coconut').hover(function() {
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
});
</script>
<style type="text/css">
body
{
background-image: url('http://s5.postimg.org/6qbplw2xj/Background_main.jpg');
background-position: top center;
background-repeat: no-repeat;
background-color: black;
height: 800px;
width: 800px;
}
#coconut
{
position: absolute;
width: 450px;
height: 400px;
top: 300px;
right: 20px;
border: 2px solid red;
}
.hover
{
background-image: url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
}
</style>
</head>
<body>
<div id="coconut"></div>
</body>
</html>
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.