функция запуска onmouseover, не связанная с элементом

Что я хочу сделать, так это: когда вы наводите указатель на изображение «albatross» id, изображение «skua» id исчезает. В качестве кода в настоящее время изображение skua исчезает, как только загружается страница, независимо от того, где мышь находится (или выключена) на странице.
Оба изображения альбатроса и skua расположены абсолютно в отдельной таблице стилей.функция запуска onmouseover, не связанная с элементом

document.getElementById("#albatross").onmouseover = fadeRest(); 
function fadeRest() { 
    $("#skua").fadeOut(); 
}

Что-то еще, что я попытался было это:
document.getElementById("albatross").addEventListener("mouseover", fadeRest()); с той же функцией fadeRest, которая ведет себя так же, как в коде выше. Однако, если я добавлю # в альбатрос, изображение skua больше не исчезнет, независимо от того, наложена ли я над альбатросом или нет.
Я изменил функцию fadeRest на предупреждение, чтобы узнать, регистрируется ли вообще указатель мыши, и не получил предупреждения, поэтому кажется, что прослушиватель событий не добавляется.

Все, что поможет мне понять, что я делаю неправильно, было бы весьма признательно, спасибо.

источник

2017-01-17 mt-everer

fadeRest() с() означает, что вызов функция. Поэтому, когда вы пытаетесь установить его как обратный вызов mousover в своем коде, вы фактически вызываете его вместо этого и устанавливаете обратный вызов на его возвращаемое значение ... –

Это потому, что 'getElementById()' не требует добавления '#', поскольку он знает ** получить ** ** элемент ** ** ** **. 'jQuery' использует' # 'и' .' в селекторах, потому что именно так они различают ID/Class. Также '.addEventListener (" mouseover ", fadeRest())' должен быть '.addEventListener (" mouseover ", fadeRest, false);' и '.onmouseover = fadeRest()' должен быть '.onmouseover = fadeRest;' – NewToJS

Поскольку вы используете JQuery, вы можете сделать это таким образом

$('#albatross').hover(function() { 
 
    $("#skua").fadeOut(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="albatross">albatross</div> 
 
<div id="skua">skua</div>

Если вы хотите иметь событие MouseLeave ...

$('#albatross').hover(function() { 
 
    $("#skua").fadeOut(); 
 
}, function() { 
 
    $("#skua").fadeIn(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="albatross">albatross</div> 
 
<div id="skua">skua</div>

Вы также можете использовать $.on() с именем события

$('#albatross').on('mouseenter', function() { 
 
    $("#skua").fadeOut(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="albatross">albatross</div> 
 
<div id="skua">skua</div>

источник

2017-01-17 02:13:45

Вы назначаете обратный вызов для сброса функции вместо самой функции. Другими словами, вы немедленно вызываете fadeReset.

Попробуйте вместо этого:

function fadeRest() { 
 
    $("#skua").fadeOut(); 
 
} 
 
document.getElementById("albatross").onmouseover = fadeRest;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="albatross"> 
 
    <div id="skua">Hover over me</div> 
 
</div>

источник

2017-01-17 02:09:12

функция запуска onmouseover, не связанная с элементом

ответ

Смежные вопросы