rafacardosoc
rafacardosoc

Reputation: 251

Change Background when a different div is hovered

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

I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.

THIS is what i have so far: ( i tried using javascript) jsFiddle

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

and THIS is what i wanted to show up when the COCONUT is HOVERED:

enter image description here

Upvotes: 0

Views: 48

Answers (1)

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

http://jsfiddle.net/AGbRH/2/

This works, (Of course the hover div doesn't fit perfectly on the fruit)

<li>...</li>

In your previous example, you've never closed a "li" tag. Remeber, always close them.

Upvotes: 1

Related Questions