文章/答案/技术大牛

发布

问转换浏览器问题Css3
EN

Stack Overflow用户

提问于 2016-10-04 19:20:46

回答 2查看 34关注 0票数 0

我已经搜索过了，无法找到解决方案。我有一个名为#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中工作，但是它有一个像小马车一样的过渡。在镀铬或资源管理器中，它根本不起作用。我也在使用基金会。我删除了css的基础，但它没有影响。

html

css

css-transitions

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-10-04 19:35:32

在display:block上使用a就可以了，这是因为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>

票数 1

Stack Overflow用户

发布于 2016-10-04 19:38:55

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39860160

复制

相似问题

问转换浏览器问题Css3
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转换浏览器问题Css3EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转换浏览器问题Css3
EN