Question

我在我的网页上有一个播放按钮的图像，我正在使用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 {}

Answer 1

你的HTML无效，愚蠢。

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

应该修复它

Answer 2

我不确定我是否理解你在寻找什么，但这里有一些有效的HTML和一个可以根据你的需求调整的悬停工作：

<a class="thumbnail">
    <img src="http://randolph.k12.nc.us/schools/whs/buttons/teal-button-png.png" alt="" />
</a>

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标签的使用，不要在文件名中使用空格。

鼠标悬停时弹出的图像

2 个答案: