过渡浏览器发布Css3

Question

我已经搜索过了，我无法找到解决方案。我有一个id为#games的部分，我有以下链接设置:

#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中工作，但是它有一个错误的转换。在chrome或浏览器中，它根本不起作用。我也用粉底。我删除了基础css，但它没有影响。

Answer 1

在a上使用display:block，它将工作，这是因为a标签是一个内联元素。如果你对'a'元素执行'inspect element'，你会发现它并没有环绕其中的元素。

让我知道这是不是你要找的

#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

下面是我对原帖的评论。

第一:锚本质上是内联元素。你不能把块元素放在内联元素中，所以这就是其他答案发挥作用的地方(使你的锚点inline-block或block)。

第二:除非你要改变属性，否则你不需要重新定义悬停时的过渡。:hover是一个更具体的选择器，但它不会使该元素上的其他样式无效。你可能还应该显式地添加一个过渡函数，以使应用程序的行为符合你的需要，并使样式更具可读性。

第三:IE8之后普遍支持不透明度，所以你真的不需要filter。这是特别正确的，因为你有一个不同的透明度指定的过滤器，这将导致不一致的行为。

第四:转换也被广泛支持。您真正需要的唯一前缀是-webkit-，甚至在大多数情况下也不需要它。

<<p> 更新代码/strong>:

#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>

Answer 4

可以在#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>