將懸停文本添加到小圖像

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>