Question

我搜索过，但无法找到解决方案。我有一个名为 #games 的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中运行，但它有一个错误的过渡。在chrome或explorer中它根本不起作用。我也在使用粉底。我删除了基础css但它没有任何影响。

Answer 1

我认为您的transition语句缺少fade参数 - 请尝试：

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

Answer 2

在display:block上使用a，这样做是因为a标记是内联元素。如果你检查元素＆＃39;在＆＃39; a＆＃39;你会发现它不会包围它里面的元素。

让我知道这是否是您正在寻找的

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

从我对原帖的评论中跟进了一些问题。

首先：锚点本质上是内联元素。您不能将块元素放在内联元素中，因此这是其他答案发挥作用的地方（使您的锚点inline-block或block）。

第二：除非您正在更改属性，否则您不需要在悬停时重新定义转换。 :hover是一个更具体的选择器，但它不会使该元素上的其他样式无效。您还应该明确添加一个转换函数，以根据您的需要定制应用程序的行为，并使样式更具可读性。

第三：不透明度为universally supported after IE8，因此您并不需要filter。这尤其正确，因为过滤器指定了不同的不透明度，这将导致行为不一致。

第四：过渡也是widely supported。您真正需要的唯一前缀是-webkit-，即使大部分时间都不需要这样做。

更新了代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

转换浏览器问题Css3

4 个答案: