0

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?

0

2 Answers 2

0

Replace this code

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

with

<div class="attr-label" >
1
  • I want to display the attribute label only on hover
    – Ramya
    Aug 18, 2016 at 11:08
0

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

4
  • sorry it is not working. Is anything wrong in my phtml?
    – Ramya
    Aug 18, 2016 at 12:35
  • did you replace $ with Jquery ? Aug 18, 2016 at 12:39
  • no I just followed your exact code.
    – Ramya
    Aug 18, 2016 at 12:45
  • you have to add jquery library and replace $ with jQuery Aug 18, 2016 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.