0

ボックスを作成しようとしています - この場合、CSS & HTML で #rollover と呼んでいます - 左側に 4 つの画像があります。エンド ユーザーが左側の各画像にカーソルを合わせると、画像の拡大版が右側に表示されます。私が抱えている問題は、 #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>
4

2 に答える 2

0

ホバーイベントで絶対位置を使用してみてください。

これがコードです。上と左の属性をいじって、必要な場所に取得します。

お役に立てれば。

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>
于 2012-09-28T19:54:14.677 に答える
0

文書化するだけです：ここでの解決策はposition: absolute、フルサイズの画像で使用し、コンテナの相対位置に注意して、画像がその要素に対して相対的に配置されるようにすることでした：

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

.picture a.small:hover .large {  
    position:absolute;
    top:0;
    left:160px;
    /* ... */
}
于 2012-09-28T20:06:05.767 に答える