a:hover 的不透明度过渡不起作用
Posted
技术标签:
【中文标题】a:hover 的不透明度过渡不起作用【英文标题】:Opacity transition for a:hover not working 【发布时间】:2014-08-18 01:24:35 【问题描述】:我希望所有作为链接的元素都表现出一致的行为。
a:hover opacity: 0.5;
这在 IE 和 Firefox 中有效,但不透明度(和相关的 CSS 过渡)未正确应用于 Chrome 和 Safari 中 <a>
标记的子元素。如果我为 <div>
添加显式规则作为子元素,它可以在 Chrome 和 Safari 中使用:
a:hover, a:hover div opacity: 0.5;
到目前为止一切顺利,之前已经有人问过并回答过。我遇到的问题是,通过添加包含 <div>
的规则,不透明度会在 IE 和 Firefox 中应用两次,从而使元素过于透明。
我需要涵盖这两种情况 - <a>
是否包装 <div>
,而无需编写大量明确的 CSS 规则。我怎样才能做到这一点?
http://liveweave.com/fMsz7m
【问题讨论】:
【参考方案1】:在 Safari 中对我有用的是将 display: block
添加到 a 标签中
a:hover
opacity: 0.5;
transition: opacity 0.2s ease;
display: block;
【讨论】:
【参考方案2】:我不确定这是否算作您问题的直接解决方案(我不确定孩子为什么不继承),但您可以将 display: block
添加到您的 CSS 中的 a
,这将工作(用 Firefox 和 Chrome 测试)。
JSFiddle DEMO
另一种方法是将悬停分配给<div>
,<a>
的父级。
JSFiddle DEMO
我觉得好像有更好的解决方案/解释,也许这个会激发其他人的想法。
【讨论】:
太棒了,谢谢。如果没有显示时间戳,我无法确定,但我认为 TomTomTom 根据响应的顺序回答得更快。我会接受他的。以上是关于a:hover 的不透明度过渡不起作用的主要内容,如果未能解决你的问题,请参考以下文章