0

画像にカーソルを合わせると、画像を拡大する必要があります。100x75ピクセルから300x225ピクセルに拡大する必要があります。レイアウトは正常に機能しているようです。ホバーしたときに幅が拡大しないだけです。前もって感謝します。画像は300x225ピクセルを超えて拡大縮小しないでください。

CSS：

.hoverbox a .preview {
   display: none; 
}
.hoverbox a .preview img {
   display: inline; 
}
.hoverbox a:hover .preview {
   display: block;
   position: absolute;
   top: -1em;
   left: -2em;
   z-index: 10;
   border-width: 1px 1px 6px 1px; 
   border-style: solid; 
   border-color: #fff7ea;
   border-radius: 3px; 
   -moz-border-radius: 3px; 
   -webkit-border-radius: 3px; 
   -moz-box-shadow: 2px 2px 2px #161615;
   -webkit-box-shadow: 2px 2px 2px #161615;
   box-shadow: 2px 2px 2px #161615;
}
.hoverbox img {
   background: #fff;
   border-width: 1px 1px 6px 1px; 
   border-style: solid; 
   border-color: #fff7ea;
   border-radius: 3px; 
   -moz-border-radius: 3px; 
   -webkit-border-radius: 3px; 
   -moz-box-shadow: 2px 2px 2px #161615;
   -webkit-box-shadow: 2px 2px 2px #161615;
   box-shadow: 2px 2px 2px #161615;
       padding: 2px;
   vertical-align: top;
   width: 100px;
   height: 75px;
}
.hoverbox li
{
   background: transparent;
   display: inline;
   float: left;
   margin: 3px;
   padding: 5px;
   position: relative;
 }

.hoverbox .preview {
   width: 300px;
   height: 225px;
}

HTML：

    <section>  
         <h1 class="headline">Feast your eyes.</h1>
         <ul class="hoverbox">
            <li>
                <a href="#"><img src="200opt.jpg" alt="descr"/><img src="200opt.jpg" alt="description" class="preview" /></a>
            </li>
         </ul>

    </section>

ありがとうございました

4

4 に答える 4

2

Jqueryを使用してこのアプローチを見てみましょう。

$('img').hover(function(){

$(this).width('500px');
$(this).height('400px');


}, function(){

    // set default image width & height

$(this).width('400px');
$(this).height('300px');


})​

例

于 2012-07-10T09:36:47.747 に答える
1 
.hoverbox img:hover{
  width: 300px;
  height: 225px;
}

クラスでフィドルを操作する-http://jsfiddle.net/cDxgj/2/

お役に立てれば！

于 2012-07-10T09:34:25.757 に答える
1

たぶん、CSSimg:hoverではなく使用する必要がありますか？a:hoverアンカータグをスケーリングするポイントはありません。部屋のイメージではなく、部屋を大きくしようとしているようですか？アンカータグもスケーリングする場合は、次を使用します。position:absolute;

于 2012-07-10T09:37:06.547 に答える
1 
<ul class="hoverbox">
          <li>
            <a href="#"><img src="200opt.jpg" alt="descr"/><img src="200opt.jpg" alt="description" class="preview" /></a>
           </li>
</ul> **/* close ul*/**
于 2012-07-10T09:40:23.423 に答える