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

【问题标题】：Change background color of transform:rotate object on hover in Firefox更改变换的背景颜色：在 Firefox 中悬停时旋转对象
【发布时间】：2012-12-18 09:11:10
【问题描述】：

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

【问题讨论】：

你在 html 中哪里使用了 A 类？
在 Firefox 9 中运行良好。
注意：我使用的是 Firefox 17.0.1
您可以尝试在 CSS 中定义一个命名类并在元素中使用它
我认为您在 FireFox 中发现了一个错误。此代码在 JSFiddle 中运行良好，但不能单独作为文件。此外，如果您的悬停声明更改了块的形状，它似乎会起作用。但如果你只是改变颜色，它不会。此外，如果您更改尺寸以使结果具有相同的尺寸（例如：将宽度减小 1，但添加 1px 边框），它仍然不起作用。

标签： html firefox css

【解决方案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 中不起作用

【讨论】：