CODEWITHSUNDEEP
javascriptjquerygoogle-chromejquery-events
icyrock.com
icyrock.com

Reputation: 28608

mouseover fires multiple times over one span element

Here's a simple jsFiddle:

I have one span element that I bound mouseover to. When I move the mouse horizontally across different lines of text, mouseover happens only once. However, when I move between lines of text within the same span element, mouseover happens multiple times.

Using Chromium, version 28.0.1500.71 Ubuntu 13.04 (28.0.1500.71-0ubuntu1.13.04.1).

Upvotes: 1

Views: 433

Answers (4)

charlietfl
charlietfl

Reputation: 171669

This seems to stem from an inline elemnt <span> with multiple lines of text. In reality space between each line is not contained in element as far as mouse is concerned.

This can be seen by putting background color on element. Changing it to block elemnt in css with display:block alleviates the problem, or by using other native block elements other than span

Background demo

Upvotes: 1

Daved
Daved

Reputation: 2082

Funny enough, it's because the span is an inline element and it's wrapping. Because a span is an inline item, and it's wrapping, you get individual lines, and there is space between the lines. I never picked up on this before, but, because you have a mouseout event, it makes it more obvious. To demonstrate this, check out this update on your fiddle.

Fiddle: http://jsfiddle.net/LSRvn/

The reason a DIV doesn't do this is because the DIV is a block element containing the items.

Upvotes: 1

m59
m59

Reputation: 43755

This is odd usage of a span. Since the semantic element is a <p> tag, use that. This also will correct your issue.

Upvotes: 1

Steve
Steve

Reputation: 1402

If you make it a div instead of a span it works as expected

Upvotes: 1

Related Questions