将我的鼠标移到function-javascript上

我是javascript新手，所以我不确定如何才能做到这一点。基本上，在我的网站上，我有一种工具提示，当鼠标悬停在某些输入框上时会显示出来。 这是我的javascript：

function showTip () {
    firstnameTip.style.display = "inline";
}
function hideTip () {
    firstnameTip.style.display = "none";
}
/* link HTML elements to corresponding event function */
function init () {
    /* link the variables to the HTML elements */
    firstnameTip = document.getElementById("firstnameTip");
    firstname = document.getElementById("firstname");
    /* assigns functions to corresponding events */
    firstname.onmouseover = showTip; /* for mouse */
    firstname.onmouseout = hideTip;
    firstname.onfocus = showTip; /* for cursor on input field */
    firstname.onblur = hideTip; /* for cursor moving out */
}
/* execute the initialisation function once the window*/
window.onload = init;

基本上，我想要的功能是，如果我将鼠标悬停在“firstname”上，它会显示firstnameTip，等等，比如lastname（lastnameTip），等等

---

这是一个简单的问题，但我已经尝试了很多方法，但都无法解决。有人有什么想法吗？谢谢。

有什么问题吗？工作起来很有魅力：

var firstnameTip;
var firstname;

function showTip () {
    firstnameTip.style.display = "inline";
}
function hideTip () {
    firstnameTip.style.display = "none";
}
/* link HTML elements to corresponding event function */
function init () {
    /* link the variables to the HTML elements */
    firstnameTip = document.getElementById("firstnameTip");
    firstname = document.getElementById("firstname");
    /* assigns functions to corresponding events */
    firstname.onmouseover = showTip; /* for mouse */
    firstname.onmouseout = hideTip;
    firstname.onfocus = showTip; /* for cursor on input field */
    firstname.onblur = hideTip; /* for cursor moving out */
}
/* execute the initialisation function once the window*/
init();

---

以下是我的设置方法：

function showTip (tipElement) {
    return function () {
        tipElement.style.display = "inline";
    };
}

function hideTip (element, tipElement) {
    return function () {
        if (document.activeElement !== element) {
            tipElement.style.display = "none";
        }
    };
}

function init() {
    initTipEvents("firstname", "firstnameTip");
    initTipEvents("lastname", "lastnameTip");
}

function initTipEvents(elementId, tipId) {
    var el = document.getElementById(elementId),
        tip = document.getElementById(tipId),
        showHandler = showTip(tip),
        hideHandler = hideTip(el, tip);

    el.onmouseover = showHandler;
    el.onfocus = showHandler;

    el.onmouseout = hideHandler;
    el.onblur = hideHandler;
}

window.onload = init;

演示：

---

initTipEvents

基于元素的

id

及其提示的

id

绑定所有必要的事件，重用修改后的

showTip

和

hideTip

函数。我在

hideTip

函数中添加了一个额外的检查，以确保当鼠标离开输入时，提示没有隐藏，但仍处于聚焦状态。

好的，要使其更通用，您应该使用传递给处理程序的事件参数，并从中检索目标对象，如：

var getTarget = function (event)
{
    var ttn = null;
    if (!event) 
        event = window.event;
    else if (event.target) 
        ttn = event.target;
    else if (event.srcElement) 
        ttn = event.srcElement;

    var tipId = ttn.id + "Tip";
    ttn = document.getElementById(tipId);
    return ttn;
}

然后：

function showTip (evt) {
    var ttn = getTarget(evt);
    ttn.style.display = "inline";
}

function hideTip (evt) {
    var ttn = getTarget(evt);
    ttn.style.display = "none";
}

此外：

function init () {

    /* for all relevant elements */
    for ( .... ) // iterate through a list or the dom
    {
        var theElement = ....(); // get the element

        /* assigns functions to corresponding events */
        theElement.onmouseover = showTip; /* for mouse */
        theElement.onmouseout = hideTip;
        theElement.onfocus = showTip; /* for cursor on input field */
        theElement.onblur = hideTip; /* for cursor moving out */
     }
}
/* execute the initialisation function once the window*/
init();

---

希望这会有所帮助。

这不会应用于像OP请求的多个元素，如果您必须对每个元素都执行所有这些操作，那么这将是非常长的一段时间，因为每个元素都非常有效，并且完全符合我的需要。谢谢！