0

我在 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>
4

1 回答 1

0

我有同样的问题

这是我的代码

<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 中不起作用

于 2012-12-18T01:11:10.767 回答