Question

全新的。试图在Wix上设计一个网站，但他们在悬停时没有文字颜色变化。

我搜索并在线发现了这个HTML代码，但我无法更改字体，它一直让我回到Arial。任何人都可以了解字体部分的错误吗？（悬停效果很好）

＆＃13;

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">


<style>
  
  p,
  p:hover {
    font-family: 'Tangerine', sans;
    font-size: 32px;
    text-align: center;
    transition: text-shadow 0.5s, color .5s ease-in-out;
  }
  p:hover {
    transition: color 0.5s, text-shadow .5s ease-in-out;
    color: yellow;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    -webkit-font-smoothing: antialiased;
  }
  
</style>



<p>
  TEXT GOES HERE
</p>

＆＃13;

Answer 1

在一个搞笑的转折中，正是你的HTML评论打破了CSS。

HTML评论语法：

CSS评论语法：/* comment */

我也整理了一些冗余代码。这是工作：

p {
  /*This will be executed for whether the text is hovered or not*/
  font-family: 'Tangerine', sans;
  font-size: 32px;
  text-align: center;
  transition: text-shadow .5s, color .5s ease-in-out;
  -webkit-font-smoothing: antialiased;
}
p:hover {
  /*This will only be executed on mouse over*/
  color: yellow; /*The color of the text*/
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<!--Imports google's "Tangerine" font-->

<p>
  TEXT GOES HERE
</p>

Answer 2

确保在代码的p：hover块上添加正确的font-family，检查代码段。

问候。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"><!--Imports google's "Tangerine" font-->

<style>

p, p:hover{<!--This will be executed for whether the text is hovered or not-->

font-family: 'Verdana';

font-size: 32px;

text-align:center;

transition: text-shadow 0.5s , color .5s ease-in-out;

}

p:hover{<!--This will only be executed on mouse over-->

transition: color 0.5s , text-shadow .5s ease-in-out;

color: yellow;<!--The color of the text-->

text-shadow:

-1px -1px 0 #000,

1px -1px 0 #000,

-1px 1px 0 #000,

1px 1px 0 #000;

-webkit-font-smoothing: antialiased;
  font-family: 'Verdana';

}

</style>

<p>

TEXT GOES HERE

</p>

悬停时文字的字体

2 个答案: