我有以下 HTML:
<ul>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
</ul>
CSS
ul {
list-style: none;
text-align: center;
}
ul li {
position: relative;
float: right;
margin-right: 20px;
width: 30%;
}
ul li {
transition: all 0.3s;
}
ul li:hover {
top: -10px;
}
ul li> a{
color: red;
}
问题是过渡不适用于 moz,它适用于 webkit。我如何以跨浏览器的方式实现它?
最佳答案
如果元素中未指定初始值,浏览器不会在属性上应用 transition
。因此,将 top: 0px
添加到 ul li
将解决问题。
ul {
list-style: none;
text-align: center;
}
ul li {
position: relative;
float: right;
margin-right: 20px;
top: 0px; /* this line was added */
width: 30%;
}
ul li {
transition: all 0.3s;
}
ul li:hover {
top: -10px;
}
ul li> a {
color: red;
}
<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
<li>
<a href="#">
<h2>title</h2>
</a>
</li>
</ul>
注意:我还建议使用 Mr_Green 的回答中提到的相同选项 (transform
)。
关于CSS 过渡不适用于 FF 中的顶级属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18440393/