Jquery Div Hover change other Div Class

Question

I'm trying to make one div change its class when hovering over its container div. See below the the code.. Structure goes like this:

Div Container

   Top Div

   Middle Div

   Bottom Div

(End Div Container)

Now What I want is when hovering over the container I want the bottom div to add the class called "fboto" which changes/adds a background image to that div.

Below is my current code using jquery however it doesn't seem to do anything.

<script>
$("#fbot").hover(
  function () {
    $(this).addClass("fboto");
  }

);


</script>



<!-- fullbox container -->
<div id="fbox">
<div id="ftop"></div> <!-- top of fullbox -->



<!-- middle of fullbox -->
<div id="fmid">

</div>
<!-- end middle of fullbox -->



<div id="fbot"></div> <!-- bottom of fullbox -->
</div>
<!-- end fullbox container -->

Answer 1

I threw together a jsfiddle for you here.

as @charliegriefer said - make sure you have jQuery included and the css for .fboto is defined.

I may have misunderstood what you were asking, so I updated my jsfiddle. I think @Felix Kling is right though - you were just missing the $(function(){...}); - which is basically a jquery onload method.

Answer 2

Basically everything needs to go into the document ready function. Also if you use hover, you may need to use prepend. Notice that this is a fully working example.

$(document).ready(function () {

}

see below the html code:

<div id="container1" class="container1White">

<label>Main Text</label>

<div id="name1"><h1>Heading</h1></div>

<div id="name2"><p>Body</p></div>

<div id="name3"><p>Footer</p></div>

 

</div>

 

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        $("#name1").mouseover(

            function () {

                $(this).addClass("container1Red");

            }

         );

 

 

        $("#name2").hover(

            function () {

                $(this).addClass("container1White");

            }

         );

 

 

 

 

 

        var name3FlipFlop = true;

        $("#name3").mouseover(

 

            function () {

                if (name3FlipFlop == true) {

                    $("#container1").removeClass("containerWhite");

                    $("#container1").addClass("container1Black");

                    name3FlipFlop = false;

                }

                else {

                    $("#container1").removeClass("container1Black");

                    $("#container1").addClass("containerWhite");

                    name3FlipFlop = true;

 

                }

            }

         );

 

 

 

 

 

    });

</script>

Answer 3

You have to put your jQuery code into $(function() {...}) so that it is executed after the whole DOM is loaded. You probably also want to remove the class after hovering:

$(function() {
    $("#fbot").hover(function () {
        $(this).addClass("fboto");
    },
    function () {
        $(this).removeClass("fboto");
    });
});

(Read about the .ready() function -- I just presented a commonly used shortcut)

Furthermore, you said you want to add a class to footer when its container div is hovered. So would the class also be added if "top div" is hovered? If so, call hover on the container div:

$("#fbox").hover(function () {
    $("#fbot").addClass("fboto");
},
function () {
    $("#fbot").removeClass("fboto");
});

If not, you can make use of the mouseover and mouseout events:

$("#fbox").mouseover(function(e) {
    if(e.target == this) {
        $("#fbot").addClass("fboto");
    }
}).mouseout(function(e) {
    if(e.target == this) {
        $("#fbot").removeClass('fboto');
    }
});

Update:

It seems that the browser does no apply the style defined in the class fboto.

I think this is because the ID selector has a higher priority than the class selector (because it is more specific). Try to change your CSS to:

#fbot.fboto {
   /*...*/
}

Update2: And apart from that, margin, width, etc are exactly the same in both styles, and although the background images have different names, the image itself is exactly the same (here and here).
So event if you did everything correctly, you would not see a difference!