在CSS悬停图片调整大小不起作用

问题描述：

我必须放大图片，当我把它悬停在它上面时，它应该从100x75像素放大到300x225像素。布局似乎工作正常，它只是宽度不扩大时，徘徊。先谢谢你。图片的缩放比例不应超过300x225像素。在CSS悬停图片调整大小不起作用

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>

谢谢

'.hoverbox .preview：hover'，而不是'.hoverbox .preview' – JNF 2012-07-10 09:32:06

感谢，它的怪异。仍然显示奇数50px的宽度，但高度是可以的。 – 2012-07-10 09:40:04

很难说 - 似乎在为我工作。你有多少浏览器试过？ – JNF 2012-07-10 10:03:42

答

采取使用jQuery看看这个方法：

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

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


}, function(){ 

    // set default image width & height 

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


})

Example

上测试过了，干杯后会看看 – 2012-07-10 09:45:27

demo：http://jsfiddle.net/cDxgj/2/是jquery在这里需要的吗？ – Dipak 2012-07-10 09:49:37

答

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

工作拨弄你的类 - http://jsfiddle.net/cDxgj/2/

希望这有助于！

谢谢。它似乎根本不起作用，显示正确的高度，但widht只有50px左右。似乎是像一些边缘或填充挤压它。不确定 – 2012-07-10 09:41:21

发布一个链接，我们可以焚烧它 – Dipak 2012-07-10 10:00:29

谢谢，它仍然在我的电脑本地。对于fiddlejs或smth中的其他人来说，它似乎工作正常。我已经在IE，Chrome，FF – 2012-07-10 10:10:38

答

也许你应该使用img:hover而不是a:hover在你的CSS？没有点定标锚标签。好像你正试图让房间变大，而不是房间里的图像？如果你想在锚标记规模为好，那么你只需要使用position:absolute;

答

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

谢谢，ul在我的记事本中关闭。奇 – 2012-07-10 09:42:29

在CSS悬停图片调整大小不起作用

相关推荐