在<img/>标记上显示隐藏的元素

Question

我的HTML代码中有一张图片：

<img src="main.jpg" />

当我将鼠标放在main.jpg上时，我想在main.jpg上显示一个较小的可链接图像。 （这个图像是链接） 我更喜欢通过CSS使用较小的图像。

我试过了：

<div class="img"><img src="main.jpg" /></div>
<div class="resize"><a href="resizepic.jpg">resize imgae</a></div>

.resize{
    background:url(resize.jpg) left top no-repeat;
    position:absolute;
    top:0;
    left:0;
    desiplay:none;
    text-indent: -9999px;
}

我想用纯CSS（没有JS）做这个......你知道一个技巧或另一种方法吗？

Answer 1

这将解决您的问题

<div class="img"> 
    <img src="main.jpg" /> 
    <div class="resize"><a href="resizepic.jpg">resize imgae</a></div>
</div>

同样更正你的CSS课程

将desiplay:none;更改为display:none;