Question

我在firefox中遇到了一个奇怪的CSS问题。如果我有旋转的对象，将其定位为“固定”，我无法在悬停时进行背景更改。

如果我移除旋转，或移除固定位置（例如更改为绝对位置），则悬停工作。但我需要旋转和固定位置。有人知道为什么会这样吗？

见下面的例子：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.testing {
    background:#00F;
    color:#FFF;
    display:block;
    width:300px;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    position:fixed;
    top:300px;
    left:400px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  -webkit-transform-origin: 50px 50px;
  -moz-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  -o-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
}
.testing:hover {
    background:#F00;
}
</style>
</head>

<body>
    <a href="#" class="testing">Testing Background Color</a>
</body>
</html>

Answer 1

我遇到了同样的问题

这是我的代码

<div id='lightbox'>
            <div id='addtocart'>
                <a href='$link'></a>
            </div>
         </div>

灯箱的位置是：固定的并且添加到购物车有按钮

在这个例子中它不起作用

当我这样做时

<div id='lightbox'></div>
        <div id='addtocart'>
            <a href='$link'></a>
        </div>

再次工作

     #lightbox{
            position:fixed;
            top:0;
            left:0;
            z-index:12;
            background-color:rgba(0,0,0,0.8);
            width:100%;
            height:100%;
            overflow:hidden;
}


     #addtocart a:link{
            position:fixed;
            bottom:10%;
            right:10%;
            background: url("/vans/afbeeldingen/Navigatie/cart2.png") no-repeat scroll 0 0px transparent;
            width:199px;
            height:49px; 
}


     #addtocart a:hover{
            background: url("/vans/afbeeldingen/Navigatie/cart.png") no-repeat scroll 0 0px transparent;    
}

所以当你在一个固定的div中有一个按钮时，它不再显示悬停。

第一个代码只能在firefox中运行

更改变换的背景颜色：在Firefox中悬停时旋转对象

1 个答案: