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;
}

Working Fiddle with your class - http://jsfiddle.net/cDxgj/2/

Hope this helps!

于 2012-07-10T09:34:25.757 回答
1

也许你应该使用img:hover而不是a:hover在你的 CSS 中？没有必要缩放锚标签。似乎您正在尝试使房间更大，而不是房间中的图像？如果您希望锚标签也可以缩放，那么您只需使用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 回答