我正在尝试使用JQuery和CSS来允许用户浏览不同大小图像的“墙”。使用JQuery和CSS扩展/缩小Div
基本上,当用户将鼠标悬停在图像上时,我希望它展开(当前正在工作),并且我希望div的宽度也增加,以显示一些其他信息。出于某种原因,当我悬停在这一点上时,会出现一些非常怪异的行为,并且当我将鼠标移出时,图像会完全关闭。我有一种感觉,我错过了某处的“停止”,但我无法弄清楚在哪里。有人可以看看吗?
JQuery的:
jQuery(function($){
$('.bar').mosaic({
animation : 'slide'
});
});
HTML:
<div class="MBT-CSS3">
<!--Bar-->
<div class="mosaic-block bar">
<a href="http://buildinternet.com/project/mosaic" target="_blank" class="mosaic-overlay">
<h4>This video is really cool! Click to watch more!</h4>
<p>by Media Innovation Team</p>
</a>
<!-- <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/> -->
<img src="img/grad1.png"/>
</div>
</div>
<div class="clearfix"></div>
CSS
.MBT-CSS3 div{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
/*opacity: 0.5;
z-index: 1;*/
position:relative;
overflow:hidden;
background-color:#000;
width: auto;
height: auto;
/*margin: 0 10px 5px 0; */
}
.MBT-CSS3 div:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
/*box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray; */
opacity: 1;
z-index: 100;
width:600px;
/*height:250px; */
}
由于任何人可能能够帮助!!!!我非常感谢你的时间!
你正在使用jQuery插件?你可能想在你的问题中提到这一点。另外,发布[JSFiddle](http://www.jsfiddle.net)示例可能会为您提供更多帮助。 – Sparky 2011-05-17 20:53:33
哇,这确实是时髦的...我把它放在jsfiddle玩耍。 http://jsfiddle.net/dlikhten/QqFrj/1/ – 2011-05-17 20:53:40
只是一个fyi,由Dmitriy发布的JSFiddle在Safari中工作不太好。 “质朴”至少可以说......它四处跳跃。 – Sparky 2011-05-17 20:57:34