html - CSS/HTML 如何将鼠标悬停在图像上并让另一个图像出现在不同的位置

Question

所以我不打算应用代码，因为这只是一个 super 快速的问题，我希望没有复杂的答案。我想要做的是有一张图片，当我将鼠标放在它上面时，该图片的更大版本将出现在原始小图片的右侧。

如果有人知道我需要为此使用哪些元素，那将有助于我走上正轨。谢谢!

Answer 1

这是相关的CSS

#picture {width:100px; height: 250px; background-color:#ffffff;}
#picture a.small, #picture a.small:visited { display:block; width:100px; height:100px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}
#picture a img {border:0;}
#picture a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}
#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#picture a.small:hover .large {display:block; position:absolute; top: 90px; left:150px; width:200px; height:200px; }

这是相关的html

<div id="picture">
<a class="small" href="#nogo" title="small image"><img src="images/jupiter-s.jpg" title="small image" />
<img class="large" src="images/jupiter-l.jpg" title="large image" /></a>
</div>

让我们看看实现放大的 css 和 html。 #picture a .large {display:block;position:absolute；宽度:0；高度:0；边界:0；顶部:0；左:0；

您告诉图片 div 中的所有链接，指定了 .large 类，它们将显示为空!看一下代码。 0宽度，0高度，0边框!!任何带有指定 .large 类的链接都不会被看到，除非它悬停在上面并且指定了 .small 和 .large 类，因为您有一个单独的“悬停 .small .large”规则，它是:

#picture a.small :hover .large {display:block; position:absolute; top:-65px; left:150px; width:200px; height:200px;}

这告诉元素，大小不是 0 x 0，而是 200 x 200，瞧!你可以看图!聪明是不是!放大图像

正如您将从上面的 html 代码中看到的，您的 anchor 类是 .small，您的图像类是 .large。因此，如果您的链接悬停在上方，则

 #menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px;

数据共享自:http://www.dreamweaverclub.com/dreamweaver-show-larger-image.php