2013-08-06 5 views
-2

Я новичок в CSS и JS. Я пытаюсь иметь два события, происходящие на мыши, но он не вздрагивает. Вот код, у меня естьДва события при наведении указателя мыши

<div class="ht2_icon ht2left" style="background: url(icons/img4.png) no-repeat center;" onClick="popup('#newTeam')"> 
    <span class="tooltip" onmouseover="tooltip.pop(this, 'New Team', {position:0})"> 
     <img src="icons/img4hover.png"/> 
    </span> 
</div> 

я должен иметь всплывающую подсказку и другое изображение, работающий по наведению мыши, но это не так.

+0

Где находится javascript/jquery? –

+0

Можете ли вы назвать имена функций, которые хотите вызвать при наведении курсора мыши? – Aditya

+0

поэтому установите onmouseover на изображении, если я понимаю, что вы ищете. Вы можете использовать onmouseenter, который пузырьков –

ответ

1

Чтобы посмотреть изображение только при наведении курсора мыши, пожалуйста, используйте отдельное определение CSS для ht2_icon или ht2left:

.ht2left:hover { background: url(icons/img_hover.png) no-repeat center; } 

Для обедал несколько событий, пожалуйста, используйте привязку (это тегами JQuery, так что это JQuery решение, но с другими системами это будет очень похоже)

$(".ht2left").bind("hover", popup('#newTeam')); 
$(".ht2left").bind("hover", method2('#newTeam')); 
+0

Что делать, если это не только одно изображение, что я не могу редактировать его в CSS ?? например, я не могу использовать {background: url (icons/img_hover.png) no-repeat center; } , потому что для каждого изображения есть еще один эквивалент img при наведении –

+0

Вы можете добавить изображение во всплывающее окно как атрибут '' data- * '(http://www.w3.org/html/wg/drafts/html /master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes): ''

'и затем получить к нему доступ с помощью jQuery:' $ element.data ('popup-image') 'для изменения' src' всплывающего окна '. – Wolfram

0

Вы должны оставить свой HTML, CSS и JavaScript отдельно и программно связать свои обратные вызовы. Ваш «чистый» HTML будет выглядеть следующим образом (я добавил класс popup-trigger):

<div class="ht2_icon ht2left popup-trigger"> 
    <span class="tooltip"> 
     <img src="icons/img4hover.png"/> 
    </span> 
</div> 

В JavaScript, то ваш может добавить несколько слушателя событий для элемента, пожалуйста, проверьте this example и следующий код:

tooltips[i].addEventListener('mouseover', popTooltip); 
tooltips[i].addEventListener('mouseover', doSomethingElse); 

Если вы используете jQuery, вы должны использовать .on() function, он выполнит обратный вызов для всех текущих и будущих элементов, соответствующих селектору.

var $triggers = $(".popup-triggers"); 
$triggers.on("click", function() { 
    // do something 
}); 
Смежные вопросы