Question

我正在尝试创建一个框 - 在这种情况下，我在CSS＆amp;中称它为#rollover HTML - 左侧有四个图像。当最终用户滚动左侧的每个图像时，右侧会显示更大版本的图像。我遇到的问题是在#rollover div中保留右侧较大的图像。

CSS

#rollover{
width:739px;
height: 600px;
border: 3px solid;
padding-top:10px;
padding-left: 40px;
padding-bottom:10px;
float:left;}

.picture {
width:150px; 
height: 150px;}

.picture a.small, .picture a.small:visited { 
display:block;  
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;  
width:0; 
height:0; 
border:0; 
top:0; 
left:0;}

.picture a.small:hover .large {  
position:absolute;
top:0;
width:550px; 
height:550px; 
left:160px;} 

body{
margin:0;}

#main{
width:800px;
margin-left:auto;
margin-right:auto;}

#mast{
width:799px;
height:300px;
margin-top: 10px;
padding-top: 5px;
background-image: url(IFhalllogo.png);
background-repeat:no-repeat;}

#insidewrap{
width:749px;
margin:0;
padding:0;
border: 3px solid;
float:left;
border-color: #39C;}

HTML

<div id="rollover">
<div class="picture">
<a class="small" href="#nogo" title="small image"><img src="op/01-thumb.jpg"  title="small image" />
<img class="large" src="op/01-large.jpg" title="large image" /></a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image"><img src="op/02-thumb.jpg" title="small image" />
<img class="large" src="op/02-large.jpg" title="large image" /></a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image"><img src="op/03-thumb.jpg" title="small image" />
<img class="large" src="op/03-large.jpg" title="large image" /></a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image"><img src="op/04-thumb.jpg" title="small image" />
<img class="large" src="op/04-large.jpg" title="large image" /></a>
</div>
</div>

Answer 1

尝试在悬停事件中使用绝对定位。

这是代码，使用顶部和左侧属性来调整它以获得它想要的位置。

希望这有帮助。

<强> CSS：

#rollover{
    width:739px;
    height: 600px;
    border: 3px solid;
    padding-top:10px;
    padding-left: 40px;
    padding-bottom:10px;
    float:left;
}

.picture {
    width:150px; 
    height: 150px;
}

.picture a.small, .picture a.small:visited { 
    display:block;  
    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;  
    visibility:hidden;
}

.picture a.small:hover .large {
    display:block; 
    visibility: visible;
    position:absolute; 
    width:550px; 
    height:550px; 
    top:25px;
    left:220px;
}

<强> HTML：

<div id="rollover">
    <div class="picture">
        <a class="small" href="#nogo" title="small image">
            <img src="op/01-thumb.jpg"  title="small image" />
            <img class="large" src="op/01-large.jpg" title="large image" />
        </a>
    </div>

    <div class="picture">
        <a class="small" href="#nogo" title="small image">
            <img src="op/02-thumb.jpg" title="small image" />
            <img class="large" src="op/02-large.jpg" title="large image" />
        </a>
    </div>

    <div class="picture">
        <a class="small" href="#nogo" title="small image">
            <img src="op/03-thumb.jpg" title="small image" />
            <img class="large" src="op/03-large.jpg" title="large image" />
        </a>
    </div>

    <div class="picture">
        <a class="small" href="#nogo" title="small image">
            <img src="op/04-thumb.jpg" title="small image" />
            <img class="large" src="op/04-large.jpg" title="large image" />
        </a>
    </div>
</div>

Answer 2

只是为了记录：这里的解决方案是在全尺寸图像上使用position: absolute，注意容器的相对位置，以确保图像相对于该元素定位：

#rollover{
    position: relative;
    /* ... */
}

.picture a.small:hover .large {  
    position:absolute;
    top:0;
    left:160px;
    /* ... */
}

悬停放置问题

2 个答案: