Question

所以我试图让我的网站标题放大悬停。我一定做错了什么。当我将鼠标悬停在文本上时，文本会被放大（或者如果你愿意放大），但它会再次快速恢复到原始大小。

我希望它能够快速恢复到原始大小，但只有当我从文本中删除鼠标时才会这样做。这应该是非常基本的，但我想我在这里遗漏了一些东西。

当鼠标悬停在文本上时，如何避免使文本快速恢复原始大小？

预览： http://codepen.io/nine09/pen/pJWwWG

HTML：

<h1 class="entry-title">
<a href="http://www.google.com" rel="bookmark">This is a sample text</a>
</h1>

CSS：

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

Answer 1

只需更换它，您就可以获得所需。

.entry-title a {
  font-family: 'Oswald', sans-serif;
  color: #404040;
  display: inline-block;
  transition: all .5s ease;
}

参考Link

Answer 2

试试这个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;

}

Css文本缩放效果在悬停时捕捉

2 个答案: