javascript - How can I add a mouseover effect to a span? - Stack Overflow

admin管理员组

文章数量:1277526

I'm trying to do something, like when you Mouseover on text inside a span, the background changes. My code:

<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>

The reason I don't apply it to the h2 is a little plicated. Don't need to explain. Help?

I'm trying to do something, like when you Mouseover on text inside a span, the background changes. My code:

<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>

The reason I don't apply it to the h2 is a little plicated. Don't need to explain. Help?

• javascript
• html
• css

Share Improve this question Follow edited Oct 24, 2014 at 9:24 Bojan Petkovski 6,93311 gold badge2626 silver badges3535 bronze badges asked Oct 24, 2014 at 9:21 Ali BdeirAli Bdeir 4,3751212 gold badges6161 silver badges128128 bronze badges 2

• 1 Since no one has mentioned yet, I'd add that <h2> is NOT a valid content for <span> element. In fact the permitted content of <span> is phrasing content. Therefore you'd better use <div> element rather than <span>, probably. – Hashem Qolami Commented Oct 24, 2014 at 9:31
• If you want to highlight the text itself rather than the whole space, you should wrap the content of <h2> by an inline container line <span> element. Then apply the background color on h2 > span:hover - Example. – Hashem Qolami Commented Oct 24, 2014 at 9:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Your javacript is fine.

The span element is the inline level generic container. It also helps to inform the structure of document, but it is used to group or wrap other inline elements and/or text, rather than block level elements.

So h2 is not valid child for 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>

I suggest for containers to use block elements like div. And also i suggest to use css for this:

div:hover {
    background: red;
}

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

Just set CSS to <span>

display: block;

You need to change your span element to an inline block for this to work :

span {
   display: inline-block;
}

But note that you can achieve the same effect with CSS only :

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

You don't need javascript to do it, just with HTML and 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>

本文标签： javascriptHow can I add a mouseover effect to a spanStack Overflow