在鼠標懸停上彈出的圖像

我在我的網頁上有一個播放按鈕的圖像我正在用HTML構建，但我添加了一些代碼，它已將圖像更改爲正方形，或者它在我的播放中創建了一張圖像正方形的按鈕。在鼠標懸停上彈出的圖像

我該如何糾正這種情況，並讓代碼適用於我的播放按鈕圖像？

另外我想讓圖像在我將鼠標懸停在其上時向外彈出，而現在它向內。

HTML

<a class="thumbnail" <IMG STYLE="position:absolute; TOP: 516px; LEFT:1233px; WIDTH:130px; HEIGHT:130px" SRC="play button.png"</a>

JQUERY

$('.thumbnail').mouseover(function() { 
$('.thumbnail').removeClass('hover'); 
$(this).addClass('hover'); 
});

CSS

.thumbnail:hover, .thumbnail.hover {} 
.thumbnail:hover span, .thumbnail.hover span {}

來源

2014-08-31 Nikoan Johnson

您的HTML無效。 – 2014-08-31 02:39:36

有什麼錯誤？ – 2014-08-31 02:49:29

我不知道，如果我知道你在找什麼，但這裏的一些有效的HTML和工作彈出懸停時，你可以調整你的需求：

CSS是這樣的（和編輯隨意）：

.thumbnail:hover:after{content:'Hello!';background:#fc0; width:300px; height:100px; position: absolute; z-index:2; top:20px; left:30px; 

} 
.thumbnail:hover span, .thumbnail.hover span { 
} 
img { 
    position:absolute; 
    top: 0px; 
    left:0px; 
    width:200px; 
    height:130px 
}

，你可以看到fiddle here。你的JS根本不需要。

由於我們在這裏，請注意使用img標籤，並且不要在文件名中使用空格。

來源

2014-08-31 03:20:01 Devin

這不是我想要的彈出有點。我希望圖像本身彈出一點或放大表示給用戶它的一個按鈕，它是可點擊的 – 2014-08-31 03:41:59

然後你做它像http://jsfiddle.net/j12f491v/ – Devin 2014-08-31 03:50:19

你的HTML是無效的，愚蠢的。

<a class="thumbnail"> 
<IMG STYLE="position:absolute; TOP: 516px; LEFT:1233px; WIDTH:130px; HEIGHT:130px" SRC="play-button.png"> 
</a>

應該修復它

來源

2014-08-31 02:57:20 siabaJS

你的代碼也是無效的，愚蠢的 – Devin 2014-08-31 03:07:34

好的謝謝...修正在那裏和正方形被刪除，但它不會讓我的圖像彈出鼠標懸停 – 2014-08-31 03:08:50

在鼠標懸停上彈出的圖像

回答

相關問題