时间戳

首页 > 解决方案 > 我怎样才能只悬停跨度的内容？

css - 我怎样才能只悬停跨度的内容？

问题描述

今天，我在工作中遇到了一个问题。首先，代码是前一段时间创建的，我现在必须更正它。当然，我让沙箱更容易避免不必要的样式。

<div>
  <a id="perfect" href="https://css-tricks.com/">
    <span class="perfect">
      <p>Perfect</p>
    </span>
    <span class="maker">Solution</span>
  </a>
</div>

<div>
  <a href="https://css-tricks.com/">
    <span class="problem">Problem</span>
    <span class="maker">Makes me cry</span>
  </a>
</div>

<div>
  <a href="https://css-tricks.com/">
    <span class="problem">Problem</span>
    <span class="maker">Makes me cry</span>
  </a>
</div>

div {
  display: block;
  width: 150px;
  height: 150px;
  background: lightblue;
  text-align: center;
  float: left;
  margin: 10px;
}

a {
  display: block;
  width: 150px;
  height: 150px;
  text-decoration: none;
  color: black;
}

.problem {
  display: block;
  padding: 30px 10px 0;
}

.maker {
  display: block;
  padding: 20px 10px 0;
}

p {
  padding: 0;
  margin: 0;
}

p:hover {
  color: red;
}

我那里有三块瓷砖。首先按我的预期工作，但我希望在没有段落的第二个和第三个磁贴上收到相同的结果。

线索是红色出现，如果我将鼠标放在右侧内容上方的随机位置。我的意思是所有称为“问题”的跨度都处于悬停状态。

如何在不使用段落的情况下确保与其他瓷砖上的第一个瓷砖类似的行为？你有什么想法吗？

我尝试使用保证金来做到这一点，但这是错误的。

标签： css

解决方案

尝试将其添加到您的样式表中：

div > a > span:hover {
  color: red;
}

推荐阅读