Question

I’m trying to create an effect which is just a little more complex than css (and apparently I) can manage.

The idea is to have one of the 5 DIVs active on page load and then until a different DIV is hovered, the the previous stays active. Essentially there will always be an active element.

All that needs to be done is to hide .promoExpand and show on hover.

Here is what I have so far:

$(document).ready(function(){
    $('.promo').mouseenter(function () {
        $(this).find('.item').addClass('promoExpand').siblings().removeClass('promoExpand');
    });
});

and a chunk of the HTML.

 <div class="promo">
    <img src="img/thumb/gratings.jpg">
    <h3>Fibreglass</h3>
    <div class="item">
      <p>These products are for the home. We specialise all of our decking for use by you.</p>
    </div>
  </div>

Thanks for any help all,

Tom

Answer 1

siblings will look for elements with the same parent and it looks like your .promoExpand elements will be in different areas. Use this instead:

$(document).ready(function(){
    $('.promo').mouseenter(function () {
        $(".promoExpand").removeClass('promoExpand'); //Remove all promoExpand classes here
        $(this).find('.item').addClass('promoExpand'); //Add the new one here.
    });
});