将悬停文本添加到小图像

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个表的最后一列允许删除该行。它包含一个（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' 
    }); 
});

回答：

这不会起作用，因为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>

以上是 将悬停文本添加到小图像 的全部内容， 来源链接： utcz.com/qa/258274.html

回到顶部