jQuery исчезает контейнер, но не дети

Question

Я хочу использовать jQuery для постепенного исчезновения и постепенного появления элемента с детьми.

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

Как я могу fadeIn / fadeOut элемент контейнера, но не его дочерние элементы, если я не наведу на них указатель мыши?

PS: не могу использовать RGBA, цвет фона.

Answer 1

Прежде всего, на ваш вопрос, единственный ответ: вы не можете. Совсем. Если вы прячете предка, ребенок исчезает.

Тем не менее, это можно эмулировать, используя абсолютное позиционирование и имитацию этих дочерних элементов; хотя это довольно дорого, и, я настоятельно рекомендую, следует избегать, если это вообще возможно. Однако следующее, по-видимому, удовлетворит ваш сценарий использования, учитывая следующий HTML-код (очевидно, приспособленный по вкусу):

<div class="parent">
    <div class="unwavering">child one</div>
    <div class="unwavering">child two</div>
</div>

И JQuery:

// creating and caching an element here, to avoid having to create
// elements in each iteration of the 'each()' loop, later:
var clone = $('<div />', {
    'class': 'clone'
});

// iterating over each of the child elements you want to keep visible:
$('.unwavering').each(function () {
    // we'll be referencing this node a few times, so we're caching it:
    var current = $(this),
    // we'll need this for positioning:
        currentPosition = current.position(),
    // getting all the computed styles of the current element:
        css = window.getComputedStyle(this, null),
    // getting the cssText (for the inline style):
        styles = css.cssText,
    // cloning the earlier-created element for use:
        currentClone = clone.clone();

    // setting the 'style' attribute to the cssText:
    currentClone.attr('style', styles).css({
        // overriding the following, so the clones are positioned
        // absolutely relative to the page, not their own offset parents:
        'position': 'absolute',
            'top': currentPosition.top,
            'left': currentPosition.left
    })
    // setting the html of the currentClone to that of the current element
    // (note that any duplicated ids will invalidate your HTML, and (probably)
    // break your JavaScript:
    .html(current.html())
    // setting the 'fakeParent' (made up) property:
    .prop('fakeParent', current.parent())
    // appending the clone to the body:
    .appendTo('body')
    // binding event-handlers:
    .on('mouseenter mouseleave', function (e) {
        // triggering the same event-handlers on the 'fakeParent' element:
        var target = $(this).prop('fakeParent');
        target.trigger(e.type);
    });;
});

// setting up the mouseenter/mouseleave event-handling:
$('.parent').on('mouseenter mouseleave', function (e) {
    // if the event-type (e.type) is 'mouseenter', or otherwise if
    // the event is 'mouseleave' and the related-target is a clone,
    // we add the 'hidden' class (jQuery won't duplicate present-classes);
    // otherwise we remove the 'hidden' class:
    $(this)[(e.type === 'mouseenter') || (e.type === 'mouseleave' && $(e.relatedTarget).is('.clone')) ? 'addClass' : 'removeClass']('hidden');
});

JS Fiddle demo.

Рекомендации:

• JavaScript:
  • Event.relatedTarget,
  • Event.type,
  • Window.getComputedStyle(),
• JQuery:
  • addClass(),
  • appendTo(),
  • attr(),
  • clone(),
  • each(),
  • html(),
  • is(),
  • on(),
  • position(),
  • prop(),
  • removeClass(),
  • trigger(),