Pseudo-Class: зависание сохраняется при изменении Max-Height

Это не происходит в Firefox, но это происходит в Chrome и IE. У меня есть элемент <input>, который генерирует поисковые запросы по мере ввода. Предложения появляются в трех случаях, когда вход активен, когда ваша мышь нависает над входом или когда ваша мышь витает над результатами поиска.Pseudo-Class: зависание сохраняется при изменении Max-Height

Результаты поиска с помощью CSS-переходов, чтобы скрыть/появляются, так что я его контролировать с max-height быть установлен на 500px (больше, чем список мог быть) и 0.

Проблема возникает, когда вы нажимаете на результат , Я создал событие click (используя jQuery), так что, когда вы нажимаете один из результатов, класс добавляется к результатам поиска, чтобы скрыть его, и он удаляет класс после завершения перехода (на этом этапе он должен оставаться потому что ваша мышь больше не витает над ним). В Chrome и IE список снова растет, когда этот класс удаляется, если вы не перемещаете мышь.

Есть ли способ обновить браузер, так что псевдокласс класса :hover уходит?

Вот модифицированную демо, который работает почти так же: http://jsfiddle.net/zZMcv/3/

источник

2013-06-14 Pluto

установить список display: none, затем setTimeout, чтобы вернуть его обратно на дисплей: блок через 100 мс. Пока он скрыт: hover будет отключен, и поскольку он будет крошечным, когда он снова появится, он больше не будет находиться под курсором мыши. Возможно, вам придется отключить эффекты перехода, чтобы купить достаточное время для того, чтобы список сократился из-под указателя мыши, временная установка параметра класса - длительность до 0 соответствовала бы счету ... – dandavis

Да, просто полагаясь на jQuery, чтобы изменить отображение атрибут работает безупречно, он работает с задержкой 0мс в Chrome, но задержка в 120 мс в IE. Поэтому просто добавление этих двух строк на страницу 'setTimeout (функция, 350)' работает: 'v.hide(); setTimeout (function() {v.show();}, 120); ' Опубликуйте свой комментарий в качестве ответа, и я приму его: O – Pluto

рад, что он работает, но в спешке; Я позволю кому-то амбициозному захватить ответ первым, кто-нибудь? – dandavis

вы можете изменить код JS, чтобы показать и скрыть список так, чтобы увернуться: парить

function addResults() { 
    $(this).parents('.input-field-label-set-2-column').next().empty().append($('<b>').text($(this).text())); 
    var v = $(this).parent(); 
    pendSearch.call(v.prev().val(this.innerHTML)[0]); 
    v.addClass("js-hide"); 

    v.hide(); 
    setTimeout(function(){v.show();},120); 

    setTimeout(function() { v.removeClass("js-hide"); }, 350); 
}

или, вы можете вероятно, просто измените класс .js-hide, чтобы он отображал отображение: none; переходная продолжительность: 0;

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

источник

2013-06-14 20:29:19 dandavis

Pseudo-Class: зависание сохраняется при изменении Max-Height

ответ

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