Question

On Magento, I’m trying to get avalable attributes per product in a new div (show/ hide onmouseover) as soon as I hover a product. Unfortunately, my jQuery code opens every div with the same name. I think, I need to do it with jQuery(this) but I tried it in a 1000 different ways, and it won’t work. Maybe, somebody here can help me with a better code.

jQuery(function() {
    jQuery('.slideDiv').hide().data('over', false);
    jQuery('#hover').hover(function() {
      jQuery('.slideDiv').fadeIn(); 
    }, function() {
      // Check if mouse did not go over .dialog before hiding it again
      var timeOut = setTimeout(function() {
        if (!jQuery('.slideDiv').data('over')) {
          jQuery('.slideDiv').fadeOut();
          clearTimeout(timeOut);
         }
       }, 100);
    });

    // Set data for filtering on mouse events for #hover-here
    jQuery('.slideDiv').hover(function() {
      jQuery(this).data('over', true);
    }, function() {
      jQuery(this).fadeOut().data('over', false);
    });
});

The PHP just prints the attributes needed.

<a href="#" id="hover">Custom Attributes</a>
    <div class="slideDiv">                            
<?php
$attrs  = $_product->getTypeInstance(true)->getConfigurableAttributesAsArray($_product);
foreach($attrs as $attr) {
    if(0 == strcmp("shoe_size", $attr['attribute_code'])) {
        $options    = $attr['values'];
        print "Größen:<br />";
        foreach($options as $option) {
            print "{$option['store_label']}<br />";
        }
    }
}
?>
</div>

I added the script to [new link] http://jsfiddle.net/xsxfr/47/ so you can see there, that it is not working like this right now :(.

Edit: I changed right now the code to div with ul and li as children and changed the jQuery code to take the children of the div, now it is working :).

Code attached:

HTML:

<div class="hover">
    <span>Custom Attributes</span>
    <ul class="slideDiv">                            
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div class="hover">
    <span>Custom Attributes2</span>
    <ul class="slideDiv">                          
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>
<div class="hover">
    <span>Custom Attributes3</span>
    <ul class="slideDiv">                           
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
</div>

JS:

jQuery(function() {
    jQuery('.slideDivfirst, .slideDiv, .slideDivlast').hide().data('over', false);

    jQuery('.hover').hover(function() {
      jQuery(this).children('.slideDiv').fadeIn();
    }, function() {
      // Check if mouse did not go over .dialog before hiding it again
      var timeOut = setTimeout(function() {
        if (!jQuery('.slideDiv').data('over')) {
          jQuery('.slideDiv').fadeOut();
          clearTimeout(timeOut);
        }
      }, 100);
    });

    // Set data for filtering on mouse events for #hover-here
    jQuery('.slideDiv').hover(function() {
      jQuery(this).data('over', true);
    }, function() {
      jQuery(this).fadeOut().data('over', false);
    });
});

Answer 1

It’s somewhat difficult to tell, but I think you should be doing this:

$('#hover').hover(function() {
  $(this).find('.slideDiv').fadeIn(); 
}

.find selects only the children of a given element – in this case $(this) (the hovered element).

Also, make sure your element ids (e.g. "hover") are unique.