Css文本缩放效果在悬停时靠回
Css文本缩放效果在悬停时靠回
提问于 2015-06-19 18:51:10
所以我试着在悬停时放大我在网站上的标题。我一定是做错了什么。当我将鼠标放在文本上时，文本会被放大(如果你愿意，也可以放大)，但随后它又回到了原来的大小。
我想让它恢复到原来的大小，但前提是我把鼠标从文本中移走了。这应该是非常基础的，但是，我想我在这里遗漏了一些东西。
当鼠标停留在文本上时，如何避免使文本捕捉回原始大小？
h1, h2, h3, h4, h5, h6 {
clear: both;
font-family: 'Oswald', sans-serif;
font-weight: 400;
line-height: 1.2;
margin-bottom: 3%;
}
h1 {
font-size: 50px; /*Originally 50px*/
}
.entry-title {
font-family: 'Oswald', sans-serif;
font-size: 43px; /*Originally 80px*/
font-weight: 700;
letter-spacing: -1px;
line-height: 1.1;
margin-bottom: 0%;
}
@media (max-width: 768px) {
.entry-title {
font-size: 50px;
margin-bottom: 20px;
}
}
.entry-title a {
font-family: 'Oswald', sans-serif;
color: #404040;
text-decoration: none;
-moz-transition:-moz-transform 0.2s ease-in;
-webkit-transition:-webkit-transform 0.2s ease-in;
-o-transition:-o-transform 0.2s ease-in;
-moz-transition:-moz-transform 0.2s ease-out;
-webkit-transition:-webkit-transform 0.2s ease-out;
-o-transition:-o-transform 0.2s ease-out;
}
.entry-title a:hover {
font-family: 'Oswald', sans-serif;
color: #000000;
text-shadow:1px 0px #555;
-moz-transform:scale(1.03);
-webkit-transform:scale(1.03);
-o-transform:scale(1.03);
} <h1 class="entry-title">
<a href="http://www.google.com" rel="bookmark">This is a sample text</a>
</h1>
Stack Overflow用户
发布于 2015-06-19 19:03:33
试试这个fiddle。
a {
font - size: 18 px
font - family: 'Oswald', sans - serif;
color: #404040;
text-decoration: none;
-webkit-transition: color 2s, font-size 2s;
-moz-transition: color 2s, font-size 2s;
-o-transition: color 2s, font-size 2s;
transition: color 2s, font-size 2s;
}
a:hover {
font-size: 45px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30936311
复制相关文章
相似问题
腾讯云开发者
