转换浏览器问题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>