Hi, I have a kendo dropdownlist in a div on my page and I am trying to create a hover effect where when the user hovers over that general area the list will fade in/out. The problem I have is that when a user clicks on the dropdown and then hovers over the list of items, the main dropdown box fades out. I understand this happens because the list is not within my defined 'hovering' area so the fade out gets triggered.
My question is how can I set it up so that even when a user hovers over the list portion the dropdown should still be showing.
<div class="video">
<div class="headers" style="position:absolute;display:none;">
<input id="tracks" data-bind="kendoDropDownList: tracks" />
</div>
<iframe id="VideoFrame" frameborder="0" width="100%" height="100%"></iframe>
</div>
$('.video', element).hover(function() {
$(this).find('.headers').fadeToggle('fast');
});
My question is how can I set it up so that even when a user hovers over the list portion the dropdown should still be showing.
<div class="video">
<div class="headers" style="position:absolute;display:none;">
<input id="tracks" data-bind="kendoDropDownList: tracks" />
</div>
<iframe id="VideoFrame" frameborder="0" width="100%" height="100%"></iframe>
</div>
$('.video', element).hover(function() {
$(this).find('.headers').fadeToggle('fast');
});