CODEWITHSUNDEEP
jqueryhtmlcsshtml-table
Keith D Kaiser
Keith D Kaiser

Reputation: 1036

Add hover text over a small image

I have a table whose last column allows a delete of that row. It includes an image (of an X), that column looks like this.

<td id="delete:$row[recordID]"> 
    <a href="#" class="delete cent" >
    <img alt="x" border="0" src="images/delete.png" />
    </a>
</td>

I would like for the image to enlarge when hovered over and I would like to add some text when the mouse hovers over the image. The text should say "Click to Delete", I tried using jQuery like below to do this but nothing every happens. No text is displayed and the image does not grow regardless of how long I let the mouse hover over the 'x' image. I'm not sure how to add the text to his idea. How do I get this to work?

$(document).ready(function () {
$('a.delete').on('mouseenter',function() {
    $(this).css( {
        'height':'175px'
    });
});

Upvotes: 0

Views: 35

Answers (1)

Temani Afif
Temani Afif

Reputation: 272807

This will not work because this in your case is the a tag and not the image. So you are changing the height of this tag and not the image. Instead you can use find() function in order to select the image inside the tag like this :

$(document).ready(function() {
  $('a.delete').on('mouseenter', function() {
    $(this).find('img').css({
      'height': '175px'
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="delete:$row[recordID]">
  <a href="#" class="delete cent">
    <img alt="x" border="0" src="https://lorempixel.com/50/50/" />
  </a>
</td>

This is still not enough as you have also to implement the mouseleave event to put the image back to its normal size.

$(document).ready(function() {
  $('a.delete').on('mouseenter', function() {
    $(this).find('img').css({
      'height': '175px'
    });
  });
  $('a.delete').on('mouseleave', function() {
    $(this).find('img').css({
      'height': 'auto'
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="delete:$row[recordID]">
  <a href="#" class="delete cent">
    <img alt="x" border="0" src="https://lorempixel.com/50/50/" />
  </a>
</td>

By the way I suggest you to go with a CSS solution which is easier to implement. You may use the hover effect on CSS and pseudo element to add the text you need.

You may try something like this (adjust the CSS of text and image as you need) :

a.delete {
  text-decoration: none;
  position:relative;
  display:inline-block;
  overflow:visible;
}

a.delete img {
  height: 50px;
  transition: 1s
}


a.delete:hover img {
  height: 100px;
}

a.delete:hover::after {
  content:"Click Here to delete";
  position:absolute;
  z-index:999;
  left:100%;
  top:40%;
  font-size:14px;
  width:120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="delete:$row[recordID]">
  <a href="#" class="delete cent">
    <img alt="x" border="0" src="https://lorempixel.com/50/50/" />
  </a>
</td>

Upvotes: 1

Related Questions