将悬停文本添加到小图像

Question

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

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

我想为图像放大，当鼠标悬停在图像上时，我想添加一些文本。文本应该说“点击删除”，我试图使用下面的jQuery来做到这一点，但没有发生任何事情。不管我将鼠标悬停在'x'图像上多久，图像都不会显示，图像也不会增长。我不知道如何将文字添加到他的想法。我如何得到这个工作？

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

Answer 1

这不会起作用，因为this你的情况是a标签，而不是图像。所以你正在改变这个标签的高度而不是图像。相反，你可以使用find()功能，以便选择这样的标签内的图像：

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

这仍然是不够的，你必须也实现mouseleave事件把图像回到正常尺寸。

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

---

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

你可以尝试这样的事情（调整文本和图像的CSS，因为你需要）：

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>