Используйте переходы CSS, чтобы затухать 2 элемента при наведении курсора на третий

Боюсь, я бы утопил всех в коде, если бы попытался включить все важные детали, поэтому для простоты я сделал это, чтобы вы могли понять, что я пытаюсь сделать:

отредактировано:

http://jsfiddle.net/LcsJL/6/

и фактический код, который я использую:

.box-4 .box-subtitle {
    position:absolute;
    display:block;
    border-radius:0 4px 0 0px;
    -moz-border-radius:0 4px 0 0px;
    -webkit-border-radius:0 4px 0 0px;
    background:#403f3f;
    height:60px;
    width:199px;
    padding: 11px 23px 0 12px;
    max-height: 1000px;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}


.box-4:hover .box-subtitle {
    background:url(images/bg-box.gif) 0 0 repeat;

}

.box-subtitle span {
    font-size:15px;
    line-height:23px;
    color:#fff;
    text-transform:uppercase;
    font-family: 'Maven Pro', sans-serif;
    font-weight:700;
    background:url(images/bg-subtitle.png) 0 2px no-repeat;
    padding:0 0 0 32px;
    display:inline-block;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.box-4:hover .box-subtitle span {
    color:#a6e7f0;
    background:url(images/bg-subtitle1.png) 0 2px no-repeat;

}

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

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

изменить:

Хорошо, мне удалось заставить <span> исчезнуть правильным образом, используя transition: background 1s ease, color 1s ease;, так как это были единственные свойства, которые я хотел изменить. Фон все еще представляет собой проблему, поскольку я только что обнаружил, что background-image еще не поддерживается свойством для переходов. Хотя я использую background: url(URL) 0 0 repeat;, но по сути это все еще фоновое изображение, поэтому я думаю, что это доставляет мне проблемы. Кто-нибудь знает какие-нибудь обходные пути для затухания фоновых изображений? (непрозрачность не работает, так как он затухает весь div, а не просто меняет фон) Я поиграл с идеей вложения div нормального состояния поверх div состояния наведения и создания непрозрачности нормального состояния переход div при наведении курсора мыши. У меня проблемы с обдумыванием того, как это будет работать. Если кто-то способен на такой подвиг, пожалуйста, дай мне это, бэтмен.

больше правок:

Вот обновленный jsfiddle моей проблемы: я не могу правильно сложить div, хотя они абсолютно расположены друг над другом с z-index внутри относительно позиционированного обертывания. Я что-то пропустил?

http://jsfiddle.net/Ep2xa/1/


css css-transitions transitions
person Mockingbird    schedule 21.11.2013    source источник

Ответы (3)


arrow_upward
0
arrow_downward

изменить для комментария:

background-image нельзя выполнить переход в соответствии со спецификацией: http://www.w3.org/TR/css3-transitions/#animatable-css

Если вы можете использовать слегка измененный html, вы можете использовать другой div, абсолютно расположенный над изображением, а затем затемнить фон этого div. Проблема со структурой вашего html: вам нужно знать точную высоту div с фоновым изображением, чтобы охватить только это, а не диапазон. Я также переместил диапазон за пределы .content1: http://jsfiddle.net/LcsJL/8/

исходный ответ

да. Внутри .content1 нет диапазона, поэтому измените это: .box:hover .content1 span на .box:hover span

person brouxhaha    schedule 21.11.2013
comment
на самом деле это внутри него, извините, здесь: jsfiddle.net/LcsJL/5 Проблема, которую я m на самом деле заключается в том, что он просто прыгает и исчезает при наведении, он не исчезает, как говорит переход. - person Mockingbird; 21.11.2013
comment
Я вижу, как вы использовали альфа-свойство rgba для затемнения фона, но, похоже, он не исчезает снова, можно ли это как-то исправить? Извините за придирки к коду, тем не менее он очень полезен. - person Mockingbird; 22.11.2013

arrow_upward
1
arrow_downward

Проблема в том, что вы не изменили opacity при наведении.

Либо используйте transition: background 0.5s ease;, либо установите opacity при наведении.

person Kabie    schedule 21.11.2013
comment
Итак, добавить opacity: 1; к ховерам вот так? jsfiddle.net/LcsJL/7 Это все еще не исчезает, не уверен, что понимаю, что ты говоришь или нет. - person Mockingbird; 21.11.2013
comment
Проблема с opacity заключается в том, что он повлияет на все дочерние элементы этого div, поэтому любой текст также исчезнет. Смотрите мой обновленный ответ о переходах на background-image. - person brouxhaha; 21.11.2013

arrow_upward
0
arrow_downward

Я даже не знаю, что я сделал, просто начал перемещать фрагменты и удалять некоторые вещи, и вдруг произошло волшебство:

http://jsfiddle.net/LcsJL/9/

Но большое спасибо brouxhaha за предложение background:rgba перехода, это действительно помогло.

person Mockingbird    schedule 22.11.2013