How to display the label of the hovered image only?

Question

I want to display the value of an attribute while hovering over it. Following is the code to display image for that attribute values:

<?php $Technologies = explode(",",$_product->getResource()->getAttribute('technologies')->getFrontend()->getValue($_product)); ?>
    <?php if(count(array_filter($Technologies, 'strlen') ) > 0): ?>
    <div class="technologies">  
               <span>
                <?php
                 foreach($Technologies as $key => $value): ?>
                <a href="<?php echo $_product->getProductUrl() ?>">
              <?php echo "<img src='".Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."/wysiwyg/".trim($value).".png'/>"; ?>
              <div class="attr-label" >
         <?php echo $value; ?>
         </div>
                 </a>
          <?php /*echo $value; */?>


          <?php endforeach; ?>
          </span>

          </div>
          <?php endif; ?>

here I wish to display the name of the attribute value only while that particular image is hovered. So I gave the following jquery for that. But it is not working.

    <script type="text/javascript">


 $(".technologies img").hover(
      function () {
        $(".attr-label").show();
      },
      function () {
        $(".attr-label").hide();
      }
      );

</script>

When I give style like below all the name of the attribute value are displayed when hovered over any single image.

.technologies:hover .attr-label{        
display:block;
}

Kindly help me. Where have I went wrong?

Answer 1

Replace this code

<div class="attr-label" style="display:none;">

with

<div class="attr-label" >

Answer 2

try mouseover

 $( ".technologies img" ).mouseover(function() {
  $( ".attr-label").show();
});

i tested this worked for me. this code work all images and attribute label

 $( ".technologies img" ).hover(
  function() {
    $(this).siblings(".attr-label").show();
  }, function() {
   $(this).siblings(".attr-label").hide();
  }
);

working example js fiddle