在类内的链接上设置悬停答案

【问题标题】：Set hover on the link inside a class在类内的链接上设置悬停
【发布时间】：2018-05-22 14:18:29
【问题描述】：

我正在尝试为类内的链接设置 :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>

【问题讨论】：

标签： html css hyperlink hover

【解决方案1】：

问题在于您在链接上的内联样式：color: white;。

这优先于您在 CSS 文件中添加的任何样式。从内联样式中删除它可以让悬停颜色起作用。

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

.link {
color: white;
}

【讨论】：