CODEWITHSUNDEEP
javascriptcssbackground
rafacardosoc
rafacardosoc

Reputation: 251

Background image change on hover of a different div

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: https://i.sstatic.net/ek98U.jpg

Upvotes: 0

Views: 3865

Answers (4)

gvee
gvee

Reputation: 17161

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/

Upvotes: 1

gvee
gvee

Reputation: 17161

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>

Upvotes: 0

musicnothing
musicnothing

Reputation: 3985

Your #hover element needs to have a background-color or image or something that allows it to be hoverable.

JSFIDDLE

#hover {
    /* your styles ... */
    background-color:#fff; /* or something */
}

Also, yes, be sure that you've selected jQuery in the Frameworks & Extensions sidebar.

Upvotes: 2

Oleg Novosad
Oleg Novosad

Reputation: 2421

Use the :hover pseudoclass instead of jQuery.

#hover:hover {
/* your code */
}

And also, for transparent images you should use .png, not .jpg.

Upvotes: 0

Related Questions