当鼠标不再位于导航链接上时,如何调用函数?

时间:2012-03-20 16:42:04

标签: javascript javascript-events

我的HTML文件中有这样的导航代码:

<div id="center_links">
            <ul>
                <li><a href="#" onMouseOver="javascript:setSideText(1)">about</a></li>
                <li><a href="blog" onMouseOver="javascript:setSideText(2)">blog</a></li>

......等等。

我的Javascript看起来像这样:

function setSideText(setting)
{
    if (setting == 0) // Home
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
    }
    else if (setting == 1) // About
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
    }
    else if (setting == 2) // Blog
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
    }

当我鼠标悬停链接时,我页面上的旁边文字会更改以描述该链接。当我没有将鼠标悬停在导航链接上时,我希望文本更改回默认值(setSideText(0))。我现在已经玩了一段时间了,我还没能弄明白。

我尝试将此添加到javascript文件中,但无济于事:

document.getElementById('center_links').onMouseOut = setSideText(0);

无论如何,我认为它不会起作用。

我确定这是一个我没想到的简单解决方案(我只是选择了语言)。任何指导表示赞赏!

3 个答案:

答案 0 :(得分:1)

这不起作用的唯一原因是因为在Javascript中设置这些DOM事件时,没有大写;只需将.onMouseOut更改为.onmouseout

我不知道为什么他们决定在这些事件的HTML和Javascript名称之间不一致。 (我想,人们讨厌DOM的另一个原因。)

答案 1 :(得分:1)

你需要触发函数onMouseOut,就像触发函数onMouseOver一样

您的链接HTML需要如下所示:

<a href="blog" onMouseOver="javascript:setSideText(2)" onMouseOut="javascript:setSideText(0)">blog</a>

我建议在这样的东西中查看jQuery - 它使处理事件和DOM操作更加直接!

这里有一个很棒的免费课程:http://tutsplus.com/course/30-days-to-learn-jquery/

答案 2 :(得分:1)

我提出两个主要建议,第一个:不要使用内联事件处理程序(将行为放在一个地方更容易维护),第二个是在父onmouseout上使用center_links 1}}元素。

为此目的:

function setSideText(setting) {
    if (setting == 0) // Home
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
    }
    else if (setting == 1) // About
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
    }
    else if (setting == 2) // Blog
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
    }
}

var linksElem = document.getElementById('center_links'),
    links = linksElem.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].dataIndex = i+1;
    links[i].onmouseover = function() {
        setSideText(this.dataIndex);
    };
}

linksElem.onmouseout = function(){
    setSideText(0);
}

JS Fiddle demo


编辑修改setSideText()函数以回复单词而非索引(因为我认为以后添加后续链接更容易,并且不依赖于能够向元素添加任意属性,但 要求元素具有id属性...):

function setSideText(setting) {
    if (setting == 'home' || setting == 0)
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>';
    }
    else if (setting == 'about')
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>';
    }
    else if (setting == 'blog')
    {
        document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.';
    }
}

var linksElem = document.getElementById('center_links'),
    links = linksElem.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].onmouseover = function() {
        setSideText(this.id);
    };
}

linksElem.onmouseout = function(){
    setSideText(0);
}

JS Fiddle demo