如何给span添加鼠标悬停效果？

Question

我正在尝试做一些事情，比如当你在span内的文本上移动鼠标时，背景会改变。

我的代码：

<script>
    function unhighlight(x) {
        x.style.backgroundColor="transparent"
    }

    function highlight(x) {
        x.style.backgroundColor="red"
    }
</script>


<span onmouseover="highlight(this)" onmouseout="unhighlight(this)">
    <h2>What's New</h2>
</span>

我不将其应用于h2的原因有点复杂，不需要解释。需要帮忙吗？

- Ali Bdeir

---

由于还没有人提到，我想补充一下，<h2>不是<span>元素的有效内容。实际上，<span>元素的允许内容是*短语内容*。因此，你最好使用<div>元素而不是<span>元素。 - Hashem Qolami

如果您想突出显示文本本身而不是整个空间，应该将<h2>的内容包装在内联容器行<span>元素中。然后在h2 > span:hover上应用背景颜色 - **示例**。 - Hashem Qolami

Answer 1

您的javascript代码很好。

span元素是行内级通用容器。它也有助于文档结构，但它用于组合或包装其他行内元素和/或文本，而不是块级元素。

因此，h2不是span的有效子元素：

HTML标准

function unhighlight(x) {
  x.style.backgroundColor = "transparent"
}

function highlight(x) {
  x.style.backgroundColor = "red"
}

span {
  display: block;
}

<span onmouseover="highlight(this);" onmouseout="unhighlight(this)"><h2>What's New</h2></span>

我建议使用块级元素，例如 div 来作为容器。同时，我建议使用 CSS 对其进行样式控制：

div:hover {
    background: red;
}

<div>
    <h2>What's New</h2>
</div>

- Alex Char

---

这与 width 和 height 无关，是 block 显示类型在这里起了作用。关键是 <span> 是一个内联包装器，而且标记完全无效。 - Hashem Qolami

Answer 2

只需将 CSS 设置为 <span>

display: block;

- Legionar

Answer 3

你需要将你的 span 元素改为内联块才能使其正常工作：

span {
   display: inline-block;
}

但是请注意，您可以仅使用CSS实现相同的效果：

span {
    display: inline-block;
    background-color: transparent;
}
span:hover {
    background-color: red;
}

- lapin

Answer 4

你不需要使用JavaScript，只需使用HTML和CSS：

    #myText {
      display: inline-block;
      background-color: transparent;
    }
    #myText:hover {
      display: inline-block;
      background-color: red;
    }

<span id="myText"><h2>What's New</h2></span>

- cнŝdk