зависание срабатывает при щелчке и удалении элемента

У меня странная проблема. Я не нашел никакого решения.зависание срабатывает при щелчке и удалении элемента

У меня есть событие click и hover на элементе. Когда я нажимаю на элементы и убираю как щелчок, так и зависание, но я не хочу, чтобы hover работал, когда я нажимаю и ухожу.

$('div#menu > div.menu').hover(function() { 
 
    $(this).addClass('menuHighlight'); 
 
    $(this).find('.spanHighlight').addClass('shown'); 
 
}, function() { 
 
    $(this).removeClass('menuHighlight'); 
 
    $(this).find('.spanHighlight').removeClass('shown'); 
 
    console.log('unhover'); 
 
}); 
 

 
$('.menu').click(function() { 
 
    var _id = $(this).attr('id'); 
 
    $('.menu').removeClass('menuHighlight'); 
 
    $(this).addClass('menuHighlight'); 
 
    $('.spanHighlight').removeClass('shown'); 
 
    $(this).find('.spanHighlight').addClass('shown'); 
 
    $('#content > div').removeClass('shown'); 
 
    $('#' + _id + 'Main').addClass('shown'); 
 
});

.spanHighlight { 
 
    position: relative; 
 
    bottom: 10px; 
 
    display: block; 
 
    height: 10px; 
 
    background: rgb(16, 168, 171); 
 
    display: none; 
 
} 
 
.shown { 
 
    display: block!important; 
 
} 
 
.menuHighlight { 
 
    background: rgb(80, 91, 123); 
 
} 
 
div#menu .icon > div { 
 
    width: 30px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 10px; 
 
} 
 
div#menu > div.menu { 
 
    width: 180px; 
 
    height: 100%; 
 
    color: white; 
 
    display: inline-block; 
 
    line-height: 48px; 
 
    text-align: center; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="menu" style=" 
 
    height: 50px; 
 
    width: 100%; 
 
    BACKGROUND: rgb(57,65,101); 
 
    border-radius: 5px; 
 
"> 
 
    <div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span> 
 
    </div> 
 
    <div id="addApp" class="menu menuHighlight">Add Application<span class="spanHighlight shown"></span> 
 
    </div> 
 
    <div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span> 
 
    </div> 
 
</div>

Я хочу, чтобы обе функции работать, но когда я нажав на .menu и оставляя элемент unhover не должен вызывать. Пожалуйста, помогите мне, как это сделать

источник

2015-07-24 Jayababu

Это не странно ... Как вы определяете "парить"? – Phoenix

Вы не можете использовать CSS для состояния зависания? Так что вам просто нужно сделать toggleClass на элементе, который щелкнул;) –

для использования css hover, я могу установить только мой стиль с помощью 'linear-gradient', но он не будет работать в' Ie9 и ниже', поэтому мне нужно написать hover с помощью скрипта – Jayababu

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

$('div#menu > div.menu').hover(function() { 
 
    $(this).addClass('menuHighlight'); 
 
    $(this).find('.spanHighlight').addClass('shown'); 
 
}, function() { 
 
    if ($(this).hasClass('clicked')) { 
 
    return; 
 
    } 
 
    $(this).removeClass('menuHighlight'); 
 
    $(this).find('.spanHighlight').removeClass('shown'); 
 
    console.log('unhover'); 
 
}); 
 

 
$('.menu').click(function() { 
 
    $('.menu.menuHighlight').removeClass('menuHighlight'); 
 
    $('.menu.clicked').removeClass('clicked'); 
 
    $(this).addClass('menuHighlight').addClass('clicked'); 
 

 
    $('.spanHighlight.shown').removeClass('shown'); 
 
    $(this).find('.spanHighlight').addClass('shown'); 
 

 
    $('#content > div').removeClass('shown'); 
 
    $('#' + this.id + 'Main').addClass('shown'); 
 
});

.spanHighlight { 
 
    position: relative; 
 
    bottom: 10px; 
 
    display: block; 
 
    height: 10px; 
 
    background: rgb(16, 168, 171); 
 
    display: none; 
 
} 
 
.shown { 
 
    display: block!important; 
 
} 
 
.menuHighlight { 
 
    background: rgb(80, 91, 123); 
 
} 
 
div#menu .icon > div { 
 
    width: 30px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 10px; 
 
} 
 
div#menu > div.menu { 
 
    width: 180px; 
 
    height: 100%; 
 
    color: white; 
 
    display: inline-block; 
 
    line-height: 48px; 
 
    text-align: center; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="menu" style=" 
 
    height: 50px; 
 
    width: 100%; 
 
    BACKGROUND: rgb(57,65,101); 
 
    border-radius: 5px; 
 
"> 
 
    <div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span> 
 
    </div> 
 
    <div id="addApp" class="menu menuHighlight">Add Application<span class="spanHighlight shown"></span> 
 
    </div> 
 
    <div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span> 
 
    </div> 
 
</div>

гораздо проще реализация с использованием CSS для висения будет

$('.menu').click(function() { 
 
    $('.menu.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 

 
    $('#content > div').removeClass('shown'); 
 
    $('#' + this.id + 'Main').addClass('shown'); 
 
});

.spanHighlight { 
 
    position: relative; 
 
    bottom: 10px; 
 
    display: block; 
 
    height: 10px; 
 
    background: rgb(16, 168, 171); 
 
    display: none; 
 
} 
 
div#menu .icon > div { 
 
    width: 30px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 10px; 
 
} 
 
div#menu > div.menu { 
 
    width: 180px; 
 
    height: 100%; 
 
    color: white; 
 
    display: inline-block; 
 
    line-height: 48px; 
 
    text-align: center; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 
div#menu > div.menu:hover, div#menu > div.menu.selected { 
 
    background: rgb(80, 91, 123); 
 
} 
 
div#menu > div.menu:hover .spanHighlight, div#menu > div.menu.selected .spanHighlight { 
 
    display: block!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="menu" style=" 
 
    height: 50px; 
 
    width: 100%; 
 
    BACKGROUND: rgb(57,65,101); 
 
    border-radius: 5px; 
 
"> 
 
    <div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span> 
 
    </div> 
 
    <div id="addApp" class="menu selected">Add Application<span class="spanHighlight"></span> 
 
    </div> 
 
    <div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span> 
 
    </div> 
 
</div>

источник

2015-07-24 08:12:04

простая логика, благодаря ее работе :) – Jayababu

зависание срабатывает при щелчке и удалении элемента

ответ

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