我的网站上有一个报价框,它位于浏览器的右侧。悬停时会显示可用日期列表。我尝试使用 css 转换,它在除 IE 之外的所有浏览器上都能正常工作,令人惊讶。所以我转向了 jQuery。我想出了这个:
<div id="quote">
<p>Quote</p>
</div>
CSS:
#quote {
background: #9C1818;
height: 150px;
width: 150px;
border-radius: 10px;
margin-right: -100px;
position: absolute;
right: 0;
top: 60px!important;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
#quote:hover {
transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari */
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-o-transform:rotate(0deg); /* Opera */
}
jQuery:
$('#quote').css({
backgroundPosition: "0 0"
}).hover(function() {
$(this).stop().animate({
height: '150px',
width: '250px',
backgroundPosition: "(200px 0px)"
}, {
duration: 900
});
}, function() {
$(this).stop().animate({
height: '150px',
width: '150px',
backgroundPosition: "(0px 200px)"
}, {
duration: 900
});
});
这可以在鼠标悬停时按我想要的方式工作,但是当我离开它时,它会将框的高度跳跃到宽度,我知道它为什么这样做,因为变换,但我需要“引用”这个词来行动像那样。我是 jQuery 的新手,所以我不确定是否有更简单的方法来实现这一点。基本上我想要的功能是让盒子在悬停时向左移动,然后在没有高度差异的情况下向左移动。这是一个小提琴
/编辑/我找到了一个解决方案,我将悬停变换放在 p 上,如下所示:
#quote p {
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
#quote:hover p {
transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari */
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-o-transform:rotate(0deg); /* Opera */
}
我不确定这是否是最好的方法,但它对我有用