当我将鼠标悬停在图像按钮上时,我试图同时执行两件事,我需要显示另一张图像,并且还需要显示工具提示
我成功实现了第一个(即,当我将鼠标悬停在图像按钮上时显示另一张图像,但无法显示该图像按钮的工具提示。 这是我的 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"));
});
});
对于两个图像按钮,如果我执行注释掉的输出行,我需要在第二个按钮中执行相同的操作(我得到的工具提示项目的名称为 (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 作为标题(工具提示)
关于javascript - 当我们悬停时无法显示图像按钮的工具提示项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18890677/