Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Nikolaj Haugaard
Nikolaj Haugaard
44 Points

Please help me change style of div when hoverting another div :)

Hi guys, i have been driving myself crazy trying to achieve this.

I made a example page: http://cv-builder.net/example/

I'm trying to make the description id="beskrivelse" slide up when you hover the product. And i tried a bunch of different things, but i just can't make it happen.

The last thing i found was this, but it don't seem to work:

$('#billedet').hover(function(){ $('#beskrivelse').style('top: -50px;'); }, function(){ $('#beskrivelse').style('top: 0px;');
});

I tried this for a long time, so any help would be so appreciated!

What i really would like is to be able to change the style of a element, when you click or hover another.. I just started Javascript, but i really need to figure this out fast as possible.

Thank you so very much! :)

7 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Nikolaj,

Would something like this help you?

<style>
#main{
  width:100px;
  height:200px;
  background-color:red;
  position:relative;
}

#description{
  width:100px;
  height:50px;
  background-color:blue;
  position:absolute;
  bottom:0;
}
</style>
<div id='main'>
  <div id='description'>
    <p>Product Name</p>
  </div>
 </div>
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
 <script>
$('#main').mouseover(function(){
    $('#description').css('height','100px');
});
$('#main').mouseout(function(){
    $('#description').css('height','50px');
});
</script>
Nikolaj Haugaard
Nikolaj Haugaard
44 Points
Nikolaj Haugaard
Nikolaj Haugaard
44 Points

I'm sorry if it seems suspicious Guled A, but i promise you it's very safe. No i don't have any knowledge of Javascript, or jquery yet, only html and css.. But i just started it. But this is something that really would help me out right now, that's why i'm asking :)

It's a Wordpress/ Woocommerce site.

Hugo Paz thank you very much! :) I tried putting the code in, but unfortunately it does not work for me.. I get a error in the console: "Uncaught TypeError: undefined is not a function (index):4217 (anonymous function)"

And the description does not change.. I put it in like this:

$('#billede').mouseover(function(){ $('#beskrivelse').css('height','100px'); }); $('#billede').mouseout(function(){ $('#beskrivelse').css('height','50px'); });

Hugo Paz
Hugo Paz
15,622 Points

If its a wordpress site you might be having issues with the $. The jQuery library included with WordPress is set to the noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

So you need to replace the dollar sign ($) with jQuery in your script. So $('#main') becomes jQuery('#main').

Nikolaj Haugaard
Nikolaj Haugaard
44 Points
Nikolaj Haugaard
Nikolaj Haugaard
44 Points

Hugo Paz it worked!! :) I don't know how to thank you enough, this changes so much for me! :D Thank you so much! Amazing! :)

Nikolaj Haugaard
Nikolaj Haugaard
44 Points
Nikolaj Haugaard
Nikolaj Haugaard
44 Points

Hugo Paz - can i ask you just one more thing Hugo? :) If you check the example you can see it only add's the "effect" to the first product in line, and not the rest?

Do you have an idea why that is? They all use the same id's (#billede) (#beskrivelse)

http://cv-builder.net/example/

Hugo Paz
Hugo Paz
15,622 Points

An Id is a unique identifier so it only affects one. If you want to have multiple divs you need to use something like this: 

<style>
.main{
  width:100px;
  height:200px;
  background-color:red;
  position:relative;
  margin-left: 30px;
  display: inline-block;
}

.main div{
  width:100px;
  height:50px;
  background-color:blue;
  position:absolute;
  bottom:0;
}
</style>
<div class='main'>
  <div>
    <p>Product Name 1</p>
  </div>
 </div>

 <div class='main'>
  <div>
    <p>Product Name 2</p>
  </div>
 </div>

 <div class='main'>
  <div>
    <p>Product Name 3</p>
  </div>
 </div>

 <div class='main'>
  <div>
    <p>Product Name 4</p>
  </div>
 </div>

 <div class='main'>
  <div>
    <p>Product Name 5</p>
  </div>
 </div>
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
 <script>
$('.main').mouseover(function(){
    $(this).children('div').css('height','100px');
});
$('.main').mouseout(function(){
    $(this).children('div').css('height','50px');
});
</script>

Remember to change the dollar sign.

Nikolaj Haugaard
Nikolaj Haugaard
44 Points
Nikolaj Haugaard
Nikolaj Haugaard
44 Points

Right okay, thank you! :) I gave the description a class instead of the id, but now when i hover a product it effects all products, and not just the one i'm hovering over? And when i keep it as a id, it only works on the first product? Is there a way to isolate the code to the product i'm hovering? :)

Thanks again Hugo Paz i know im pushing it :)

Hugo Paz
Hugo Paz
15,622 Points

Hey, did you check the code above?

I use the children method to access the div (description) inside the .main div. I use the keyword this so depending on which .main the mouse pointer is on, the corresponding description is affected.

Nikolaj Haugaard
Nikolaj Haugaard
44 Points
Nikolaj Haugaard
Nikolaj Haugaard
44 Points

And can i just say how great it is that you actually take the time to explain to me how it works, instead of just giving me the right code.. It makes a HUGE difference! There is so many things that makes more sense now for me, so thank you for that!

Nikolaj Haugaard
Nikolaj Haugaard
44 Points
Nikolaj Haugaard
Nikolaj Haugaard
44 Points

Thank you very much Hugo! I really appreciate it! :)