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 standard

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>

Answer 2

只需将CSS设置为<span>

即可

display: block;

Answer 3

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

span {
   display: inline-block;
}

但请注意，您只能使用CSS实现相同的效果：

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

Answer 4

您不需要使用javascript来执行此操作，只需使用 HTML 和 CSS ：

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: