Question

我正在尝试设置：hover for class in class。起初我试过

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

将鼠标悬停在类中的链接上

1 个答案: