轉換瀏覽器問題Css3

Question

我已經搜索，我無法找到解決方案。我有一個ID爲＃遊戲的部分，我有以下鏈接設置。

#games a { 
 
    opacity: 1.0; 
 
    filter: alpha(opacity = 100); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
} 
 

 
#games a:hover { 
 
    opacity: 0.6; 
 
    filter: alpha(opacity = 5); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
}

<section id="games"> 
 
    <a href="https://www.game.com" target="_blank"> 
 
     <div class="columns small-12 medium-6 large-3 col-pad"> 
 
      <img src="http://kurld.com/images/wallpapers/games-pictures/games-pictures-10.jpg"> 
 
      <h3>My Game Title</h3> 
 
      <dl class="clearfix"> 
 
       <dd>Gamename</dd> 
 
       <dd>Stats</dd> 
 
      </dl> 
 
     </div> 
 
    </a> 
 
</section>

它工作在Mozilla，但它具有類似越野車的過渡。而在鉻或探險家它根本不工作。我也在使用基礎。我刪除了基礎的CSS，但它沒有任何影響。

Answer 1

上a使用display:block，它會工作，這是因爲a標籤是一個內嵌元素。並且如果'檢查''元素'在'a'元素上，您將會看到它不會環繞它內部的元素。

讓我知道如果這是你要找的人

#games a { 
 
    display:block; 
 
    opacity: 1.0; 
 
    filter: alpha(opacity = 100); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
} 
 

 
#games a:hover { 
 
    opacity: 0.6; 
 
    filter: alpha(opacity = 5); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
}

<section id="games"> 
 
    <a href="https://www.game.com" target="_blank"> 
 
     <div class="columns small-12 medium-6 large-3 col-pad"> 
 
      <img src="images/games/myimage.jpg"> 
 
      <h3>My Game Title</h3> 
 
      <dl class="clearfix"> 
 
       <dd>Gamename</dd> 
 
       <dd>Stats</dd> 
 
      </dl> 
 
     </div> 
 
    </a> 
 
</section>

Answer 2

我覺得你transition聲明缺少fade參數 - 嘗試：

transition: opacity .5s ease-in-out; 

Answer 3

您可以在#game a使用display:inline-block。

#games a { 
 
    opacity: 1.0; 
 
    filter: alpha(opacity = 100); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
    display:inline-block; 
 
} 
 

 
#games a:hover { 
 
    opacity: 0.6; 
 
    filter: alpha(opacity = 5); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
}

<section id="games"> 
 
    <a href="https://www.game.com" target="_blank"> 
 
     <div class="columns small-12 medium-6 large-3 col-pad"> 
 
      <img src="images/games/myimage.jpg"> 
 
      <h3>My Game Title</h3> 
 
      <dl class="clearfix"> 
 
       <dd>Gamename</dd> 
 
       <dd>Stats</dd> 
 
      </dl> 
 
     </div> 
 
    </a> 
 
</section>

Answer 4

從我的原帖評論跟進所以的幾個問題。

第一：錨是本質上的內聯元素。您不能將塊元素放入內聯元素中，因此這是其他答案發揮作用的地方（使您的錨點爲inline-block或block）。

第二：除非要更改屬性，否則不需要重新定義懸停時的轉換。 :hover是一個更具體的選擇器，但它不會使該元素上的其他樣式無效。您還應該明確地添加一個轉換函數，以根據需要定製應用程序的行爲，並使樣式更具可讀性。

第三：不透明度是universally supported after IE8，所以你並不需要filter。這是特別真實的，因爲你有不同的過濾器指定的不透明度，這將導致不一致的行爲。

第四：轉換也是widely supported。你真正需要的唯一前綴是-webkit-，即使這在大多數情況下都不是很需要。

更新代碼：

#games a { 
 
    display: block; 
 
    opacity: 1.0; 
 
    
 
    -webkit-transition: opacity .5s ease; 
 
      transition: opacity .5s ease; 
 
} 
 

 
#games a:hover { 
 
    opacity: 0.6; 
 
}

<section id="games"> 
 
    <a href="https://www.game.com" target="_blank"> 
 
     <div class="columns small-12 medium-6 large-3 col-pad"> 
 
      <!-- This image is dead anyway, so I'm commenting it out for now --> 
 
      <!-- <img src="http://kurld.com/images/wallpapers/games-pictures/games-pictures-10.jpg"> --> 
 
      <h3>My Game Title</h3> 
 
      <dl class="clearfix"> 
 
       <dd>Gamename</dd> 
 
       <dd>Stats</dd> 
 
      </dl> 
 
     </div> 
 
    </a> 
 
</section>