如何在跨度中添加鼠标悬停效果？

Question

我正在尝试做一些事情,比如当您将鼠标悬停在跨度内的文本上时,背景会发生变化.我的代码:

<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的原因有点复杂.不需要解释.救命？

Answer 1

你的javacript很好.

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>