Използвайте 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 при поставяне на мишката. Все пак имам проблем да си обясня как ще работи това. Ако някой е способен да постигне подобно постижение, моля, jsfriddle ми това, Батман.

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

Ето актуализиран jsfiddle на моя проблем, не мога да накарам divs да се стекат правилно, въпреки че ги разполагам абсолютно позиционирани един върху друг с z-индекс вътре в относително позиционирана обвивка. Изпускам ли нещо?

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 с фоновото изображение, за да покриете само това, а не обхвата. Също така преместих span извън .content1: http://jsfiddle.net/LcsJL/8/

оригинален отговор

да Вътре в .content1 няма span, така че променете това: .box:hover .content1 span на .box:hover span

person brouxhaha    schedule 21.11.2013
comment
всъщност е вътре в него, съжалявам, тук: jsfiddle.net/LcsJL/5 Проблемът, който Всъщност това, което имам, е, че той просто скача навътре и навън при задържане, не избледнява, както му казва преходът. - person Mockingbird; 21.11.2013
comment
Виждам как сте използвали свойството alpha на 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