Question

在我的php页面中动态显示缩略图。为了确保这些都是我用这种方式做的相同尺寸

<a class="zoom" href="...">
<img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $images_jpg;?>);" class="centered" />
</a>

CSS

img.centered {
background-repeat: no-repeat;
background-position: center center;
}

/* 1 attempt */
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}

/* 2 attempt */
a.zoom img:hover {
background-image: url(thumb/zoom.jpg);
}

我想在事件上显示不同的图像：悬停，但这不起作用。我怎么能这样做？感谢

Answer 1

在您的示例中，<img>始终覆盖<a>背景图片。为避免这种情况，您可以在悬停时隐藏图像。但这有点难看;）

a.zoom:hover {
    background-image: url(thumb/zoom.jpg);
}

a.zoom:hover img
{
   opacitiy: 0;
}

Answer 2

你可以这样做。

HTML：

<div class="image" style="background-image:url(http://www.randomwebsite.com/images/head.jpg);">
    <div class="overlay"></div>
</div>

CSS：

.image {
    width: 200px;
    height: 200px;
    border: 1px solid;
}
.overlay {
    width: 100%;
    height: 100%;
}
.overlay:hover {
    background: url(http://1.bp.blogspot.com/-lJWLTzn8Zgw/T_D4aeKvD9I/AAAAAAAACnM/SnupcVnAsNk/s1600/Random-wallpapers-random-5549791-1280-800.jpg);
}

因此，我们在PHP上以div为您提供的图片。在内部我们有覆盖图，当用户悬停时你想要的图像。因此我们将其设置为100％宽度和高度，以便占用所有父div并设置悬停。

DEMO HERE

Answer 3

试试这个

<img class="centered" src="thumb/default.png"/>

和jquery

$(".centered").attr("src","second.jpg");

CSS改变在图象背景老鼠翱翔的背景

3 个答案:

HTML：

CSS：