2012-12-17 48 views
0

我在Firefox中遇到了奇怪的CSS問題。如果我有一個旋轉的對象,將其定位爲「固定」,我無法在懸停時更改背景。更改變換的背景顏色:在Firefox中懸停旋轉對象

如果我刪除旋轉,或刪除固定位置(如更改爲絕對),則懸停工作。但我需要旋轉和固定位置。任何人有任何想法爲什麼會發生這種情況

見下面的例子:

<!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> 
+0

你在哪裏使用A類在HTML? – underscore

+0

它在Firefox 9中工作正常。 – ATOzTOA

+0

注意:我使用的是Firefox 17.0.1 –

回答

0

我有同樣的問題

,這是我的代碼

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

燈箱的是具有位置:固定 和添加到購物車是在該示例中具有按鈕

其不是窩rking

當我這樣做

<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;  
} 

讓你有一個固定的股利其沒有顯示任何更多的懸停按鈕時。

第一個代碼只不能在Firefox工作

相關問題