Question

我只是在要创建的网站上有此部门，上面有一些文字

就像“示例”一样，当我将鼠标悬停在除法上时，我希望文本变为“任意”。

我找到了这个论坛，但我不太了解，有人可以解释吗？

Answer 1

尝试使用事件监听器mouseover。

document.querySelector('div').addEventListener('mouseover', function() {
  this.innerHTML = 'Whatever';
})

<div>
  Example
</div>

如果您希望每当鼠标指针移出div时将文本设置回“ Example”，请使用事件监听器mouseout。

const div = document.querySelector('div');
div.addEventListener('mouseover', function() {
  this.innerHTML = 'Whatever';
});

div.addEventListener('mouseout', function() {
  this.innerHTML = 'Example';
});

<div>
  Example
</div>

Answer 2

不使用Javascript，简单的解决方案是：

div {
  background: tomato;
  display: inline-block;
  padding: 6px 18px;
  font: 16px sans-serif;
  color: #fff;
  cursor: pointer;
}

div span {
  display: none;
}

div span:first-child {
  display: inline-block;
}

div:hover span {
  display: inline-block;
}

div:hover span:first-child {
  display: none;
}

<div>
  <span>Hello</span>
  <span>World</span>
</div>

Answer 3

在您共享的链接中，它们在CSS中用作伪元素，并且已经有了答案。阅读以供参考：

Pseudo Element

Pseudo Element : Before

Answer 4

另一个可能的答案是使用css-pseudo-selector ::before和::after，因为它们具有内容属性。像这样：

.hover-me { background: orangered; }
.hover-me::after { content : "Bleh." }
.hover-me:hover::after{ content : "Blahargh!" }

<div class="hover-me"></div>

但是从维护角度来看，您希望与放置内容的位置和样式的位置保持一致。（“嗯，这次我是否将文本放入CSS或HTML中？”），并且您可以使用的内容非常有限（没有html），但是至少了解一下可能会很好。

div悬停后，如何在div中更改文本？

4 个答案: