Question

我有一个表，其最后一列允许删除该行。它包含一个图像（X），该列看起来像这样。

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

我希望图像在悬停时放大，我想在鼠标悬停在图像上时添加一些文字。文本应该说＆＃34;点击删除＆＃34;，我尝试使用如下的jQuery来做到这一点，但没有任何事情发生。无论我将鼠标悬停在＆＃39; x＆＃39;上多长时间，都不显示文字，图像也不会增长。图片。我不确定如何将文字添加到他的想法中。我如何让它工作？

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

Answer 1

这不起作用，因为您的案例中的this是a标记，而不是图片。因此，您要更改此标记的高度而不是图像。相反，您可以使用find()函数来选择标记内的图像，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

这仍然不够，因为您还要实施mouseleave事件以将图像恢复到正常大小。

＆＃13;

$(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'
    });
  });
});

＆＃13;

<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>

＆＃13;

顺便提一下，我建议您使用更容易实现的CSS解决方案。您可以在CSS和伪元素上使用悬停效果来添加所需的文本。

您可以尝试这样的事情（根据需要调整文本和图像的CSS）：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在小图像上添加悬停文本

1 个答案: