Question

I’m trying to create a highlight effect, where text that is hovered over is labeled in black. The structure of the html will have this content floating to the right.

http://jsfiddle.net/6hj5D/

The problem is that I only want to highlight the WORD, not the entire area of the div tag. Any ideas?

Answer 1

A simple solution would be to wrap the textual content in an additional element and add the background color attribute to it. For example a <span> element.

<div id="item 4" class="command"><span>item 4</span></div>

Then your jQuery code would look something like this –

$('.command').hover(function() {
    $(this).find('span').addClass("select");
    },function() {
    $(this).find('span').removeClass("select");
});

Or you could just add the hover event to the internal <span> –

$('.command > span').hover(function() {
    $(this).addClass("select");
    },function() {
    $(this).removeClass("select");
});

Working demo