我有这样的代码,当你滑过一张图片时,它会在它旁边放大,但是当我添加另一张图片时,它会在同一个地方放大,我怎样才能让每张图片都放大到原来的小图片旁边?这是代码;
<div id="imgmenu">
<div class="p1" title="Karla"><img src="small image" title="Thumbnail image" alt="Thumbnail image" / ><img class="large" src="large image" title="enlarged view of image" alt="enlarged view of image" /></div></div>
<style type="text/css">
<#imgmenu {position:relative; top:10px; left:10px; width:75px; background-color:#fff; z-index:100;}
#imgmenu .p1 {display:block; width:150px; height:150px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#imgmenu .p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#imgmenu .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#imgmenu .p1:hover .large {display:block; position:absolute; top:-0px; left:150px; width:400px; height:300px; border:2px solid #ccc;}
#info {z-index:100; height:22em;}
</style>
<div id="imgmenu">
<div class="p1" title="Beanie"><img src="small image" title="Thumbnail image" alt="Thumbnail image" / ><img class="large" src="large image" title="enlarged view of image" alt="enlarged view of image" /></div></div>
<style type="text/css">
<#imgmenu {position:relative; top:10px; left:10px; width:75px; background-color:#fff; z-index:100;}
#imgmenu .p1 {display:block; width:150px; height:150px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#imgmenu .p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#imgmenu .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#imgmenu .p1:hover .large {display:block; position:absolute; top:-0px; left:150px; width:400px; height:300px; border:2px solid #ccc;}
#info {z-index:100; height:22em;}
</style>
最佳答案
您的代码有几处错误。当您为 HTML 中的元素定义 id 时,它必须是唯一的:在这里,您使用的是 <div id="imgmenu">
对于两个元素。而是使用类。此外,无需两次定义 CSS 样式。这是一个 jsFiddle 我修复了一些问题,这是 HTML:
<div class="imgmenu">
<div class="p1" title="Karla">
<img src="http://placekitten.com/100/100" />
<img class="large" src="http://placekitten.com/200/200" />
</div>
</div>
<div class="imgmenu">
<div class="p1" title="Beanie">
<img src="http://placekitten.com/100/100" />
<img class="large" src="http://placekitten.com/200/200" />
</div>
</div>
这是 CSS:
.imgmenu {
position:relative;
top:10px;
left:10px;
width:75px;
background-color:#fff;
z-index:100;}
.imgmenu .p1 {
width:150px;
height:150px;
background:#fff;}
.imgmenu .p1:hover {
background-color:#8c97a3;
color:#000;}
.imgmenu .large {
position:absolute; width:0; height:0; border:0; top:0; left:0;}
.imgmenu .p1:hover .large {
position:absolute;
left:150px;
width:400px;
height:300px;
border:2px solid #ccc;}
关于HTML 悬停图像代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19033897/