使用 CSS 交换第二个孩子的内容

Question

.swap:hover span{
    display: none;
}
.swap:hover:before {
    content: attr(rel);
}
<div class = "first">
    <div class = "second"></div>
    <div class = "third swap" rel="text"><span>...</span></div>
</div>

我目前使用此代码。当鼠标悬停在第三位时，它工作得很好。

<div class = "first swap">
    <div class = "second"></div>
    <div class = "third" rel="text"><span>...</span></div>
</div>

我想像这样编辑代码。当鼠标悬停在第一个时，我需要替换第三个内容。如何编辑 CSS？

Answer 1

像这样..如果我理解正确的话。

.swap:hover .third span {
  display: none;
}
.swap:hover .third:before {
  content: attr(rel);
}

.first {
  border: 1px solid grey;
}
.second {
  padding: 15px;
  background: lightgreen;
}
.third {
  background: lightblue;
}

<div class="first swap">
  <div class="second"></div>
  <div class="third" rel="New content"><span>Old Text</span>
  </div>
</div>