Перехватить изменение отображения при наведении?

Question

У меня есть некоторые элементы, которые при наведении курсора переключают отображение (нет / блок) дочернего элемента ul.К сожалению, я не могу передать переход через CSS с отображением.Использование непрозрачности также не будет работать, так как область наведения расширяется до непрозрачности: 0 ul, и комбинация обоих (непрозрачность перехода, но все еще переключаемый дисплей), кажется, не работает.

Есть ли способ перехватить изменение отображения через Javascript, и оно исчезает между блоком и ничем?Есть ли альтернативные предложения (я пробовал высоту: 0 / автоматическое переключение, не работает правильно)?Я бы предпочел метод перехвата, чем метод чистого JS, в случае, если JS отключен или что-то в этом роде.

Answer 1

Если я вас правильно понимаю.Предполагая что-то вроде: <div class="nav-container"><ul></ul></div>.

Вы можете прослушивать hover для родителя, поскольку он содержит дочерний элемент:

var parent      = document.getElementsByClassName('nav-container')[0];
var connect     = function (element, event, callback) {/* I think you */};
var disconnect  = function (handle) {                  /* can find */};
var addClass = function (element, className) {      /* these elsewhere. */};
var removeClass = function (element, className) {      /* ... */};
var hoverHandle = connect(parent, 'hover', function (event) {
    addClass(parent, 'hovered');
    if (blurHandle) {
        disconnect(blurHandle);
    }
});
var blurHandle = = connect(parent, 'blur', function (event) {
    removeClass(parent, 'hovered');
    if (hoverHandle) {
        disconnect(hoverHandle);
    }
});  

Затем в CSS:

.nav-container > ul {
    display: none;
    /* do fade out */
} 
.nav-container.hovered > ul {
    display: block;
    /* do fade in */
}

Если вы используете jQuery1,7, тогда это станет:

var navContainers = $('.nav-container');
navContainers.on('hover', function () {
     $(this).toggleClass('hovered');
});
navContainers.on('blur', function () {
    $(this).toggleClass('hovered');
});