2015-07-20 5 views
1

У меня есть веб-страница с элементами, которые, когда мышь наводится на элемент, появляется внутри элемента. Я хочу сгенерировать «Наведение мыши»/«mouseenter», чтобы показать текст, даже если мышь на самом деле не нависает над элементом. код, например:jQuery Trigger mouseenter на элементе без фактического элемента ввода мыши

HTML

<div> 
    <span id="hover_to_show_text">Hover here to show hidden text</span> 
    <span id="hidden_text" style="display:none">Hidden text</span> 
</div>  

JS

$("#hover_to_show_text").mouseenter(function() { 
    $(#hidden_text).show(); 
}); 
$("#hover_to_show_text").mouseleave(function() { 
    $(#hidden_text).hide(); 
}); 

Я хочу, чтобы создать "MouseEnter" Это запускает «$ ("#hover_to_show_text") .mouseenter (function() {"в jQuery и оставьте для« мышиного центра »там в течение N секунд.

Я попробовал (отдельно):

$("#hover_to_show_text").hover(); 
$("#hover_to_show_text").trigger('mouseover'); 
$("#hover_to_show_text").trigger('mouseenter'); 

Не работает. Есть ли способ сделать это?

Спасибо.

+0

Не уверен, что я полностью понимаю ваш вопрос. Но после ввода кода в jsfiddle, похоже, успешно запускается mouseover и mouseenter http://jsfiddle.net/p694huuk/ – EmileKumfa

+0

Я не думаю, что вы делаете это правильно, ваш код работает нормально .... вы уверены, что у вас есть jquery в вашем проект – code

+0

У вас есть опечатки в вашем коде выше. И '$ (" # hover_to_show_text "). Trigger (" mouseenter ");' должен работать. – epascarello

ответ

3

Должно работать. События запускаются почти сразу. Таким образом, вы, возможно, не видели разницы.

Заразите тикинг mouseleave внутри setTimeout, чтобы увидеть разницу.

$("#hover_to_show_text").mouseenter(function() { 
    $('#hidden_text').show(); 
}); 
$("#hover_to_show_text").mouseleave(function() { 
    $('#hidden_text').hide(); 
}); 

$("#hover_to_show_text").trigger('mouseover'); 

setTimeout(function() { 
    $("#hover_to_show_text").trigger('mouseleave'); 
}, 1500); 

Check Fiddle

Update

// Just triggering the click event will not work if no 
// click handler is provided. 
// So create one first 
$("#btn").on('click', function() { 

    // trigger the mouse enter event 
    $("#hover_to_show_text").trigger('mouseenter'); 

    setTimeout(function() { 
     $("#hover_to_show_text").trigger('mouseleave'); 
    }, 1500); 

}); 

Update Fiddle

+0

Будет ли это работать с третьего элемента? – BenB

+0

@batz Что вы подразумеваете под третьим элементом. –

+0

Я имею в виду, что кнопка otherr вызовет ее. Например: http://jsfiddle.net/Loof31rq/1/ – BenB