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

change background color on mouse over in tooltip

本文关键字：背景 颜色 悬停 工具提示 鼠标      更新时间：2023-09-26

当我将鼠标悬停在表格中的行上时，将显示图像，当鼠标悬停在图像上时，会显示工具提示。当我将鼠标悬停在工具提示中的选项（即test1，test2）上时，放置鼠标光标的选项应突出显示或更改其背景颜色，以让用户知道他们即将单击工具提示中的哪个选项。请找到小提琴 http://jsfiddle.net/0w9yo8x6/65/

下面是示例 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();
});

我认为这就是你要找的：http://jsfiddle.net/0w9yo8x6/66/

您必须注意何时使用 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>

在上面的 HTML 中，您会看到 id="test" 有两个不同的东西？其中只有一个应该注册（第一个），因为在 DOM 上，id 必须是唯一的。所以我实现了一个类工具TipHover并将css应用于该类。

我没有接触任何其他代码，但我建议回顾一下您的代码以确保 id 是唯一的，并且如果您希望应用相同函数的多个元素，也许添加一个类将是最佳选择。

您无需编辑 HTML 并添加其他类。您可以通过添加一个简单的CSS悬停效果来实现这一点：

您只需要添加以下代码：

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

请参阅下面的完整代码： 

$(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();
});
td.myData > img {
    display: none;
    float:right;
    height: 19px;
}
td.myData:hover > img {
    display: inline-block;
}
.ui-tooltip-content span {
    transition:all 0.4s ease-in-out;
}
.ui-tooltip-content span:hover {
    background-color:Orange;
    transition:all 0.4s ease-in-out;
}
<script>
      function test(){
    	alert("test invoked");
 
    }
 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<table class="myTooltipTable" style="position:absolute;">
    <tr><td> <span id="test" >test1</span></td></tr>
     <tr><td> <span id="test" >test2</span></td></tr>
 </table>
<br/><br><br>
<table border="1">
<tr>
<td class="myData">Data1 <img class="one" id="one" data-title="Data1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/>
</td>
</tr>
<tr>
<td class="myData">Data2 <img class="one" id="one" data-title="Data2" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/>
</td>
</tr>
<tr>
<td class="myData">Data3 <img class="one" id="one" data-title="Data3" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/>
</td>
</tr>
</table>

相关文章：