Question

当我将鼠标悬停在上方时，我想提供特定的颜色字体。

<div className="actions" className="icon"><div><span></span><a href={url_path} target="_blank">trailer</a></div></div>

我尝试了但没用。除了：hover之外还有其他方法吗？

.icon:hover , .actions:hover{
  color : #FF382E;
}
.actions{
    position: absolute;
    right: 20px;
    top: 20px;
}
.icon{
      float: right;
      width: 50px;
      height: 14px;
      padding: 30px 0 10px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #E0E0E0;
      text-align: center;
      font-size: 13px;
      color: #93939c;
      position: relative;
      cursor: pointer;
}

Answer 1

悬停部分很好，唯一的问题是:hover的目标是默认情况下要悬停的元素。您可以调整CSS以更具体地定位元素：

.icon:hover , .actions:hover div a{
  color : #FF382E;
}
.actions{
    position: absolute;
    right: 20px;
    top: 20px;
}
.icon{
      float: right;
      width: 50px;
      height: 14px;
      padding: 30px 0 10px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #E0E0E0;
      text-align: center;
      font-size: 13px;
      color: #93939c;
      position: relative;
      cursor: pointer;
}

<div class="actions" class="icon">
  <div>
    <span></span>
    <a href={url_path} target="_blank">trailer</a>
  </div>
</div>

Answer 2

进行一些更改并更新了代码。

.icon:hover a {
  color: #FF382E;
}

.actions {
  position: absolute;
  right: 20px;
  top: 20px;
}

.icon {
  float: right;
  width: 50px;
  height: 14px;
  padding: 30px 0 10px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #E0E0E0;
  text-align: center;
  font-size: 13px;
  color: #93939c;
  position: relative;
  cursor: pointer;
}

<div class="actions icon">
  <div><span></span><a href={url_path} target="_blank">trailer</a></div>
</div>

JS Fiddle

Answer 3

首先，您需要将className更改为class。 icon的{{1}}类将被忽略，因为HTML元素多次具有相同的属性是无效的–将div替换为class="actions" class="icon"。

要使代码中的class="actions icon"部分起作用，可以使用:hover使a的{{1}}元素继承其父元素的颜色。

有关固定代码，请参见此JSFiddle。

除了：hover之外，还有其他方法可以更改字体颜色

3 个答案: