Question

我正在尝试创建一个高亮效果，其中悬停在上面的文字标记为黑色。 html的结构将此内容浮动到右侧。

问题是我只想突出显示WORD，而不是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");
});

Working demo

Answer 2

假设通过'word'，你的意思是为文本（而不是每个单词）的背景着色，以下应该通过包裹hovered的内容来达到这个目的。使用.command类名称的span中的select元素：

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

JS Fiddle demo

正如Lix在评论中正确指出的那样，重要的是要记住，使用此解决方案，悬停元素的所有内容都将包含在span中（假设这可能包括块级别）元素，也许div可能是更好的选择），在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 Fiddle demo

根据后一个建议，我修改了CSS，以便仅突出显示文本（div与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;
}

添加高光效果，css float

4 个答案:

Working demo