Исчезновение фона / div с заголовком / div, всегда видимым сверху

У меня есть jQuery, который исчезает в .gridHover. но это покрывает .title.

Я попытался изменить z-индекс, но затем эффект наведения останавливается при наведении на заголовок. Я попытался продублировать заголовок и затемнить его, но это просто не работает и выглядит неряшливо.

Я хотел бы, чтобы .title всегда был видимым (возможно, менял цвет при наведении курсора на .gridHover), а эффект наведения всегда мог наводиться на всю область .gridHover.

Во-первых, это возможно? Во-вторых, как? :)

HTML

<div class="gridContainer" style="background-image: url('image.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;">

     <div class="title">Title</div>

     <a href="#">
         <span class="gridHover"></span>
     </a>

</div>

jQuery

// Grid Hover - Overlay ----------------//
$('.gridHover').each(function(index) {

    $(this).hover(
      function () {
        $(this).fadeTo(100, .85);
      },
      function () {
        $(this).fadeTo(400, 0);
      }
    );

});

CSS

span.gridHover {
    width:100%;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 11;
    background:#fff;
    opacity:0;
    padding-top: 0px;
    cursor: pointer;
}

div.title {
    text-align: center;
    position:relative;
    top: 50%;
    font-family: 'RockwellStd', georgia, serif;
    color: #fff;
    z-index: 11;
}

jquery css title jquery-hover
person dmoz    schedule 20.03.2015    source источник
comment
У вас есть z-index: 11 для обоих элементов, поэтому это не может работать должным образом. Измените z-индекс .title на более высокий, и это, вероятно, сработает.   -  person Hans Meiser    schedule 21.03.2015
comment
Спасибо за предложение. К сожалению, как я упоминал в OP, когда я поднимаю z-индекс, заголовок блокирует часть области наведения, так что это не совсем жизнеспособное решение. Спасибо еще раз.   -  person dmoz    schedule 21.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Есть ли причина, по которой вы не привязываете событие наведения к родительскому элементу «gridContainer» вместо «gridHover?»

person tyau    schedule 20.03.2015
comment
Если я не ошибаюсь, событие наведения изменяет непрозрачность элемента, к которому оно привязано, верно? Итак, я хочу, чтобы .gridContainer всегда показывалось (это основное изображение), а затем наложение исчезало при наведении. Итак, если я не ошибаюсь, событие наведения должно воздействовать на отдельный элемент. - person dmoz; 21.03.2015
comment
Наведение даже привязывается к вашему селектору. Однако вы все равно можете выбрать его дочерние элементы и запустить анимацию относительно родительского селектора. Вместо использования $(this).fadeTo(100, .85); вы должны использовать $(this).find('.gridHover').fadeTo(100, .85); - person tyau; 02.04.2015