Question

当我将鼠标悬停在图像上时，我必须放大图像，它应该从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>

谢谢

Answer 1

使用Jquery看看这种方法：

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

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


}, function(){

    // set default image width & height

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


})

Example

Answer 2

.hoverbox img:hover{
  width: 300px;
  height: 225px;
}

与你的班级合作 - http://jsfiddle.net/cDxgj/2/

希望这有帮助！

Answer 3

也许您应该在CSS中使用img:hover而不是a:hover？没有点缩放锚标记。好像你试图让房间更大，而不是房间里的图像？如果您希望锚标记也可以缩放，那么您只需使用position:absolute;

Answer 4

<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*/**

CSS中的图像大小调整悬停不起作用

4 个答案: