if-else condition with hover function?
the hover()
event can take another function which is called when the mouse leaves.
$(".button").hover(
function(e){ }, // over
function(e){ } // out
);
hover(handlerIn(eventObject), handlerOut(eventObject))
Comments
-
Run over 3 years
Can I set if-else condition with hover function? I want to load a page next to the text link when I hover it and I want to be able to hover/ mouseover on the loaded content. But this loaded content will be removed under two situations:
but I have the problem with the situation number 2 - if I apply the hover function on number-2, the number 1 just won't happen. The loaded content is removed immediately when my mouse leave the text link box.
So, I am thinking to put else-if condition to the hover function if possible (or any other better ideas if you have any?) I want to remove the loaded content only if the situation number does not occur. If I have moused over on the loaded content, then don't apply situation number 2, until my mouse leave the loaded content area.
Below is the jQuery (for the situation number 1):
$(document).ready(function() { $(".button").hover(function(e){ $('.wrapper-item-content').remove(); var parent = $(this).parent(); $(this).parent().addClass('current'); var parent_top = parent.offset().top-180; var parent_left = parent.offset().left+80; $("body").append('<div class="wrapper-item-content"></div>'); $(".wrapper-item-content").css({ top: parent_top, left: parent_left, position: 'absolute', zIndex: '100', width: '350px', height: '100%', overflow: 'visible', border: '1px solid #000' }); var path_url = $(this).attr('href'); var path_file = $(this).attr('rel'); var item_wrapper = $('.wrapper-item-content'); var array_url = path_url.split('/'); var pg_url = $(array_url).last()[0]; item_wrapper.load(path_file+'?url='+pg_url, function(){ item_wrapper.hover(function() { item_wrapper.addClass('mouseenter'); },function(){ item_wrapper.removeClass('mouseenter'); parent.removeClass('current'); item_wrapper.remove(); }); parent.hover(function() { //something },function(){ if(item_wrapper.hasClass('mouseenter')) { //alert('has mouseenter'); } else { //alert('has no mouseenter'); //parent.removeClass('current'); //item_wrapper.remove(); } }); }); }, function(){ }); });
The html:
<div class="box"><a href="#" class="button" rel="content.php">Hover me</a></div>