0

我的网站上有一个报价框，它位于浏览器的右侧。悬停时会显示可用日期列表。我尝试使用 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 */
}

我不确定这是否是最好的方法，但它对我有用

4

2 回答 2

0

试试这个让旋转在 ie8 中工作：

#quote {
    background: #9C1818;
    height: 150px;
    width: 150px;
    border-radius: 10px;
    margin-right: -100px;
    position: absolute;
    right: 0;
    top: 60px!important;

    /* Modern Browsers */
    transform:rotate(270deg); 

    /* transform for IE */
    /* IE8 */   
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
    /* IE6,IE7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand');

}

使用IE 过滤器来应用旋转.. 如您所见，IE 早在 IE6 就已经支持此过滤器进行旋转

同样在上面，您忘记为现代浏览器添加不带前缀的转换..您不再需要转换属性的供应商前缀

http://caniuse.com/#search=transforms

希望这可以帮助

于 2013-10-10T17:43:53.323 回答
0

展示演示

我将#quote样式与p...分开

CSS：

#quote { 
   height: 150px;
   width: 150px;
   padding: 20px 0;
   border-radius: 10px;
   margin-right: -100px;
   background: #9C1818;
   position: absolute;
   right: 0;
   top: 60px!important;  
}

#quote p {
   width: 150px;
   height: 150px;
   margin: 0 0 0 10px;
   -ms-transform:rotate(270deg); /* IE 9 */
   -moz-transform:rotate(270deg); /* Firefox */
   -webkit-transform:rotate(270deg); /* Safari and Chrome */
   -o-transform:rotate(270deg); /* Opera */
}
于 2013-10-10T18:17:29.720 回答