html - 在类内的链接上设置悬停

Question

我正在尝试为类内的链接设置 :hover。一开始我试过

.link{
color: #e62739;
} 

我看到过去的讨论并尝试提出的解决方案

.opener a.link:hover {
    color: #e62739;
}

但是没有用。我不确定我的错误在哪里。

.link{text-decoration:none; color:white;}

.opener a.link:hover {
    color: #e62739;
}

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

div {font-family:'Varela Round';
}
  
  .opener {
  background-color: #07183d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: 1px white solid;
}

.benefits {
  background-color: #07183d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width:300px;
}

a {
  text-decoration: none;
}

#upbutton {
  border: 1px dotted white;
}

<div class="row">
<div class="opener col" style="padding-left: 10px;padding-right: 10px;"><a class="link" href="www.google.com" name="1" onclick=" show('1');" style="color: white;font-size: 14px;">SOCIETES: 400</a>
<div class="benefits" id="b1" style="display: none; color: white; font-size: 14px;">Part SBF 120 : 120<br />
Part Filiales +100M€: 280
<div id="upbutton"><a onclick=" hide('1');">fermer</a></div>
</div>
</div>

Answer 1

问题是您在链接上获得的内联样式:color: white;。

这优先于您在 CSS 文件中添加的任何样式。将其从内联样式中移除可使悬停颜色起作用。

如果您默认需要白色，请将其添加到样式表而不是内联。例如:

.link {
color: white;
}