1

我有代码，当您翻转图像时，它会在它旁边放大，但是当我添加另一张图像时，它会在同一个地方放大，我怎样才能使每个图像都放大到小的原始图像旁边？这是代码；

<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>
4

1 回答 1

1

您的代码有几处问题。当您在 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;}
于 2013-09-26T17:00:00.667 回答