jQuery mouseenter on paragraph with bold text

Question

I have a paragraph with a bold text inside

<p style="class1"><b>Some text</b> some other text</p>

and jQuery listeners for the mouseenter and the mouseout events of the class1 elements

$('class1').mouseenter(function(){
    $(this).addClass("highlight");
});

$('class1').mouseout(function(){
    $(this).removeClass("highlight");
});

where the highlight class is a style to simulate the classic HTML selection.

.highlight{
   background-color: blue;
   color: white !important
}

(I didn't used style1:hover cause i want to simulate programmatically also selection with arrows, but this is not really important now)

So, I have some paragraphs like this:

Some text some other text

Now, my problem is that when the mouse cursor passes from the bold text to the normal text (or viceversa), mouseout event triggers, loosing my fake selection but staying in the same paragraph. How can I avoid this behavior?

score 2 · Accepted Answer · answered Jul 05 '13 at 13:55

2

You have to use mouseleave event instead of mouseout..

$('.class1').mouseenter(function(){
    $(this).addClass("highlight");
});

$('.class1').mouseleave(function(){
    $(this).removeClass("highlight");
});

This will solve your problem..:)

answered Jul 05 '13 at 13:55

Dipen Dedania

1,452
1
21
37

score 0 · Answer 2 · answered Jul 05 '13 at 13:55

0

I didn't understand the problem .. But let me advice you ... Never use the tag! if you want a text to be bold, put a span on it and use the css font-weight:bold; ..

answered Jul 05 '13 at 13:55

user

539
1
11
32

Using a styled span or a tag is the same in this case, there's anyway a children in my paragraph. – Federinik Jul 05 '13 at 14:23
In general, we should leave the style to the css. Especially the tag, look here http://www.w3schools.com/tags/tag_b.asp "Note: According to the HTML 5 specification, the tag should be used as a LAST resort when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the
to
tags, emphasized text should be denoted with the tag, important text should be denoted with the tag, and marked/highlighted text should use the tag. Tip: You can also use the CSS "font-weight" property to set bold text."
– user Jul 05 '13 at 14:28
I totally agree with you, but int this case it was not relevant, that's a post about event handling and cursor scopes, not about styling. I always use span or paragraphs to style, but to laziness i put here a while developing. – Federinik Jul 05 '13 at 14:38

jQuery mouseenter on paragraph with bold text

2 Answers2

to

tags, emphasized text should be denoted with the tag, important text should be denoted with the tag, and marked/highlighted text should use the tag. Tip: You can also use the CSS "font-weight" property to set bold text."