悬停时无法显示图像按钮的工具提示项

not able to show tool tip items for image button when we are hovering

本文关键字：按钮 工具提示 图像 显示图 显示 悬停      更新时间：2023-09-26

当我悬停图像按钮时，我试图一次做两件事，我需要显示另一个图像，我还需要显示工具提示

我成功地实现了第一个（即当我将鼠标悬停在图像按钮上时显示另一个图像，但无法显示该图像按钮的工具提示。 这是我的jquery代码...

按钮

：1 （搜索按钮）

 $(function () {
    $("#Search").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^'.]+/) + "_hover.png";
        var orgimg = $(this).attr("src");
        $(this).attr("src", hoverimg);
        $(this).attr("title", orgimg);
    })
        .mouseout(function () {
            $(this).attr("src", $(this).attr("title"));
        });
});
按钮

2：重置按钮

$(function () {
    $("#Reset").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^'.]+/) + "_Hover.png";
        var orgimg = $(this).attr("src");
        //var tarr = orgimg.split('/');      
        //var file = tarr[tarr.length - 1]; 
        //var data = file.split('.')[0];
        //alert(data);
        $(this).attr("src", hoverimg);
        $(this).attr("title", orgimg);
       // $(this).attr("title", data);
    })   
    .mouseout(function () {
         $(this).attr("src", $(this).attr("title"));
      });
});

对于这两个图像按钮，如果我执行注释的 Out 行，我需要在第二个按钮中做同样的事情（我正在获得具有名称的工具提示项目(Reset)但是当我从该按钮鼠标退出时，我丢失了按钮图像......

对于搜索按钮，我需要显示工具提示名称，如Search，对于重置按钮，我需要显示工具提示项，如Reset

这是这两个按钮的 HTML 标记

      <div class="rstbtn">               
            <img src="~/Images/Reset.png" id="Reset" />
        </div>
        <div class="btn">               
             <img src="~/Images/Search.png" id="Search"  />
        </div>

请任何人对此提供帮助，任何建议和任何想法，我将不胜感激......

提前非常感谢.....

"

用于搜索"按钮

$(function () {
    var orgimg = $("#Search").attr("src");
    var tooltip = $("#Search").attr("id");
    $("#Search").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^'.]+/) + "_hover.png";
        $(this).attr("src", hoverimg);
        $(this).attr("title", tooltip);
    })
        .mouseout(function () {
            $(this).attr("src", orgimg);
        });
});

对"重置"按钮遵循类似的方法。由于您在标记中没有标题，因此我使用 id 作为标题（工具提示）

小提琴

试试这个 HTML 的目的 

var orgimg
var orgimg2
$(function () {
    $("#Search").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^'.]+/) + "_hover.png";
        orgimg = $(this).attr("src");
        $(this).attr("src", hoverimg);
    })
    .mouseout(function () {
        $(this).attr("src", orgimg);
    });
});
$(function () {
    $("#Reset").mouseover(function () {
        var hoverimg = $(this).attr("src").match(/[^'.]+/) + "_Hover.png";
        orgimg2 = $(this).attr("src");
        //var tarr = orgimg.split('/');      
        //var file = tarr[tarr.length - 1]; 
        //var data = file.split('.')[0];
        //alert(data);
        $(this).attr("src", hoverimg);
       // $(this).attr("title", data);
    })   
.mouseout(function () {
     $(this).attr("src", orgimg2);
  });
});

.HTML：

<div class="rstbtn">               
    <img src="~/Images/Reset.png" id="Reset" title="Reset" />
</div>
<div class="btn">               
    <img src="~/Images/Search.png" id="Search"  title="Search"/>
</div>

谢谢

相关文章：