Issue with jquery sibling fading other divs on hover

Question

I found a working JSfiddle of what I am trying to accomplish here: http://jsfiddle.net/gdoron/YwKVt/3/

I have a foreach loop:

<div class="box-product">
  <?php
  $counter = 0;
  ?>
   <?php foreach ($products as $product) { ?>
    <?php $counter++; ?>
    <div class="feature prod-<?php echo $counter ?>">
    <?php if ($product['thumb']) { ?>
    <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo    $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
    <?php } ?>
    <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
    <?php if ($product['price']) { ?>
    <div class="price">
      <?php if (!$product['special']) { ?>
      <?php echo $product['price']; ?>
      <?php } else { ?>
      <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
      <?php } ?>
    </div>
    <?php } ?>
    <?php if ($product['rating']) { ?>
    <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
    <?php } ?>

    <div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
  </div>
  <?php } ?>
   </div>

And the output is this:

 <div class="box-product">
   <div class="feature prod-1">
   <div class="feature prod-2">
   <div class="feature prod-3">
   <div class="feature prod-4">
 </div>

I tried to implement the solution from that js fiddle by adding to my header:

<script type="text/javascript">
$('.feature').hover(function(){
$(this).siblings().addClass('fade');
}, function(){
$(this).siblings().removeClass('fade');
});
</script>

and added the class:

.fade{opacity:.5;}

With no luck. Is there a better way to implement this?

Please, provide the correct HTML. That's invalid markup – Alexander Jan 13 '13 at 16:34 — Alexander, Jan 13 '13 at 16:34

score 1 · Accepted Answer · answered Jan 13 '13 at 16:36

1

I'm not sure but would it be that you are trying to execute it before the DOM is ready?

http://api.jquery.com/ready/
http://api.jquery.com/load-event/

This two are the events fired up when the page is loaded. The code you are using will not work before the page is fully loaded.

Plus you have an error in your html markup <div> needs to be properly closed using </div>

answered Jan 13 '13 at 16:36

Dharman

30,962
25
85
135

Wow that was it. Just put the function inside of the jQuery(document).ready(function($) { }; and it worked like a charm. Thank you so much! – FTSoR Jan 13 '13 at 17:21

score 0 · Answer 2 · answered Jan 13 '13 at 17:22

Just added and it worked great:

<script type="text/javascript">
 jQuery(document).ready(function($) {
  $('.feature').hover(function(){
  $(this).siblings().addClass('fade');
  }, function(){
  $(this).siblings().removeClass('fade');
  });
   });
 </script>

Issue with jquery sibling fading other divs on hover

2 Answers2