Change Div Property when hovering on another div?

So basically this is what I'm going to have:

<div id="1">
<div id="top"></div>
Text
Text
Text 
etc.

<div id="bottom"></div>
</div>

How would I go about doing the following: If someone hovers over div "1" (the entire container div) change the property of the "bottom" div (and only that bottom div) such as adding a class calle开发者_如何学运维d "over".

I'm sure there's a way however I'm guessing it would need to use something such as jquery.

If you have jquery, then it is pretty simple (this worked for me):

$('#1').hover( function() {
    $('#bottom').addClass('over');
})

First thing is don't use numbers for div ids

$("#id").hover( //mouseover id
  function () {
  $("#bottom").addClass('classname') // this function is for mouse over
  }, 
  function () {
 // this is for mouse out
  }
);

Yes, you are correct. You will need some jQuery to accomplish what you want to do.

The jQuery API documentation has the exact example you are looking for if you go and check out the hover function. Go to the bottom for an example. Adjust for your own code.