Javascript 在工具提示中更改鼠标悬停时的背景色

当我将鼠标悬停在表格中的行上时，将显示图像，当鼠标悬停在图像上时，将显示工具提示。 当我将鼠标悬停在工具提示中的选项（即test1、test2）上时，放置鼠标光标的选项应高亮显示或更改其背景色，以让用户知道他们将从工具提示中单击哪个选项。 请找到小提琴

下面是示例javascript代码：

$(function() { 
    var rowData;
    $(document).tooltip({
        items: "img, [data-title]",
        content: function () {
            var element = $(this);
            if (element.is("img"))
             {
                 rowdata = element.attr("data-title");
                 $(document).off('click', '#test');
                 $(document).on('click', '#test', function() {
                     test();
                 });


             }

            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(

            function () {
                $(this).stop(true).fadeTo(1000, 1);
            },

            function () {
                $(this).stop(true).fadeOut(200, function () {
                    $(this).remove();
                })
            });
        },
        position: {
            my: "left",
            at: "right"
        }
    });
});



$(function () {
  $('.one').attr('title', $('.myTooltipTable').remove().html());
  $(document).tooltip();
});

---

我想这就是你想要的：

您必须注意何时使用ID以及何时使用类

.toolTipHover:hover {
    background-color:lightgray;
}

<table class="myTooltipTable" style="position:absolute;">
    <tr><td> <span id="test" class="toolTipHover">test1</span></td></tr>
     <tr><td> <span id="test" class="toolTipHover">test2</span></td></tr>
 </table>

.toolTipHover:悬停{
背景颜色：浅灰色；
}
测试1
测试2

在上面的html中，您可以看到id=“test”有两种不同的功能？其中只有一个应该注册（第一个），因为在DOM上，ID必须是唯一的。因此，我实现了一个类toolTipHover并将css应用于该类

---

我没有涉及任何其他代码，但我建议您重新检查代码，以确保ID是唯一的，如果有多个元素需要应用相同的函数，那么添加一个类可能是最佳选择。

您不需要编辑HTML并添加另一个类。您可以通过添加一个简单的

CSS

悬停效果来实现这一点：

您只需添加以下代码：

.ui-tooltip-content span:hover {
    background-color:Orange;
    transition:all 0.4s ease-in-out;
}

请参见下面的完整代码：

$（函数（）{
var数据；
$（文档）。工具提示({
项目：“img，[数据标题]”，
内容：功能（）{
var元素=$（此）；
if（要素is（“img”））
{
rowdata=element.attr（“数据标题”）；
$（文档）.off（'单击'，'测试'）；
$（文档）。在（'单击'，'测试'，函数（）上）{
test（）；
});
}
返回$（this.prop（'title'）；
},
show:null，
关闭：功能（事件、用户界面）{
ui.tooltip.hover(
函数（）{
$（this.stop（true）.fadeTo（1000,1）；
},
函数（）{
$（此）.stop（真）.fadeOut（200，函数（）{
$（this.remove（）；
})
});
},
职位：{
我的：“左”，
在：“对”
}
});
});
$（函数（）{
$（'.one'）.attr（'title'，$（'.myTooltipTable'）.remove（）.html（））；
$（document.tooltip（）；
});
td.myData>img{
显示：无；
浮动：对；
高度：19px；
}
td.myData:hover>img{
显示：内联块；
}
.ui工具提示内容范围{
过渡：所有0.4缓进缓出；
}
.ui工具提示内容范围：悬停{
背景颜色：橙色；
过渡：所有0.4缓进缓出；
}

功能测试（）{
警报（“调用测试”）；
}
测试1
测试2




数据1
数据2
数据3