如何在沒有 JavaScript 的情況下在滑鼠懸停在圖像上時顯示文字？

滑鼠懸停在圖像上時顯示文字

您希望在圖像的左下角顯示一個包含超連結的小框，當滑鼠懸停在其上。為了在不使用JavaScript 的情況下實現此目的，我們提出了兩種CSS 解決方案：

CSS3 解決方案：

使用CSS3 :hover 偽元素：

<div>
<pre class="brush:php;toolbar:false">#wrapper .text {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}

#wrapper:hover .text {
    visibility: visible;
}

jQuery 解決方案：

<div>
<pre class="brush:php;toolbar:false">#wrapper p {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}

$('.hover').mouseover(function() {
    $('.text').css("visibility","visible");
});

$('.hover').mouseout(function() {
    $('.text').css("visibility","hidden");
});

記住在HTML 頭中包含jQuery 庫：