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 labels are displayed when hovered over any single image.

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

Kindly help me. Where have I went wrong?

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?

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. Please help.

    <script type="text/javascript">


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

</script>

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 labels are displayed when hovered over any single image.

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

Kindly help me. Where have I went wrong?