add :hover selector to class 1 when hovering over

Question

I'm trying to add the :hover selector to a class when hovering over a different div. Basically there are 2 divs forming a button. The top part is the part that changes color when hovered over and the bottom part is simply an image. Currently, the hover only works for the top part, but I want the :hover selector to be called when hovering over the image too.

Basically it doesn't function as a single button but rather two buttons.

This is what I have but obviously this doesn't work.

$(".module-feature-img").hover(function(){
   $(".module-title-bottom").attr('class', '.module-title-bottom:hover') 
});

Also, I noticed that it stays stuck like that after I move my mouse away.

Help would be greatly appreciated

---

EDIT

Functioning site: www.exo-l.com

It's about the buttons on the bottom

I also realized this is not really going to work because there are 4 buttons and they all have the same class.. so if I hover over 1 image, they all would get the :hover selector. Any ideas?

Answer 1

$(".module-feature-img").hover(function(){
   $(".module-title-bottom").trigger('hover'); 
});

Answer 2

I'd add a .hover class and apply to it the same rule as for :hover in your CSS.

Answer 3

you can use this: http://jsfiddle.net/ZTU5v/

$(".module-feature-img").hover(function(){
  $(".module-title-bottom").addClass('hover');
}, function(){
  $(".module-title-bottom").removeClass('hover');
});​

add a callback function to remove the class.