javascript - 添加高亮效果，css浮动

Question

我正在尝试创建突出显示效果，其中悬停的文本标记为黑色。html 的结构将使该内容向右浮动。

http://jsfiddle.net/6hj5D/

问题是我只想突出显示单词，而不是div标签的整个区域。有任何想法吗？

Answer 1

一个简单的解决方案是将文本内容包装在一个附加元素中并为其添加背景颜色属性。例如一个<span>元素。

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

然后你的 jQuery 代码看起来像这样 -

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

或者您可以将悬停事件添加到内部<span>-

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

工作演示

Answer 2

假设通过“单词”，您的意思是为文本的背景着色（而不是每个单独的单词），以下应该通过使用类名将悬停.command元素的内容包装在 a中来实现该目标：spanselect

$('.command').hover(function() {
    $(this).html(
        function(i,h){
            return '<span class="select">' + h + '</span>';
        });
}, function() {
    $(this).closest('.command').find('span').contents().unwrap();
});​

JS 小提琴演示。

正如 Lix 在评论中正确指出的那样，重要的是要记住，使用此解决方案，悬停元素的所有内容都将被包裹在 a 中span（鉴于这可能包括块级元素，也许 adiv会更好选择），并且，mouseleave 这将从元素中删除所有包含的跨度。这些评论是准确的，我会将以上内容修改为以下内容，以便在mouseenter具体和更具体的方面更有效mouseleave：

$('.command').hover(function() {
    $(this).html(
        function(i,h){
            return '<div class="select">' + h + '</div>';
        });
}, function() {
    $(this).closest('.command').find('div.select').contents().unwrap();
});​

JS 小提琴演示。

有了后一个建议，我修改了 CSS，以便仅突出显示文本（因为 a 的div行为与 a 不同span），如下所示：

.select {
    background: #000;
    color: #FFF;
    white-space: pre;
    padding: 0;
    display: inline;
}

Answer 3

将 .select 类更改为：

.select{ color:red; white-space:pre} 

背景颜色已被删除（从您的原始 .select 中）。color 属性可以是您想要作为突出显示颜色的任何颜色。

您可以在此处找到有关 css 的更多信息：https ://developer.mozilla.org/en-US/docs/CSS/CSS_Reference

Answer 4

您不需要 JS，只需将其修改/添加到您的CSS：

.command{
   margin-left:50%;
   display:inline;
}
.command:hover{
    background:#000;
    color:#FFF;
}