Как я могу вызвать функцию, когда мышь больше не находится над навигационной ссылкой?

Question

У меня есть такой код навигации в моем 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);

Я полагал, что в любом случае это не сработает.

Я уверен, что есть простое решение, о котором я не думаю (я только что выбрал язык).Любое руководство приветствуется!

Answer 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/

Answer 2

Я бы сделал два основных предложения: первое: не использовать встроенные обработчики событий (удобнее иметь поведение в одном месте), а второе - использовать onmouseout в родительском элементе center_links..

Для этого:

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 .

Answer 3

Единственная причина, по которой это не сработало, заключается в том, что при установке этих событий DOM в Javascript нет заглавных букв; просто измените .onMouseOut на .onmouseout.

Я понятия не имею, почему они решили быть непоследовательными между именами этих событий в HTML и Javascript. (Думаю, еще одна причина, по которой люди ненавидят DOM.)