Как я могу создать эффект постепенного появления/исчезновения, используя только CSS?

Я хочу создавать эффекты постепенного появления и исчезновения, используя только CSS. Если я перемещаю или навожу указатель мыши на один элемент div, мне нужно вызвать другой элемент DIV для постепенного появления, а затем он должен постепенно исчезать, когда мышь уходит. Вызов элемента DOM и эффект должны быть в CSS или CSS3. Я не могу использовать javascript и Jquery.

<style> 
#b
{
    width: 200px;
    height: 40px;
    background: red;
    border-radius: 10px;
    text-align: center;
    margin: 35px;
    padding: 30px 0px;
    box-shadow: 2px 4px 10px 2px;
    opacity:0;
    color: white;
    font: 20px bold;
}
#a
{
    width: 200px;
    height: 40px;
    background: rgb(156, 155, 155);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    margin: 35px;
    padding: 30px 0px;
    box-shadow: 2px 4px 10px 2px;
    color: white;
    font: 20px bold;
}

#a:hover + #b { 
    animation:myfirst 1s;
    -webkit-animation:first 1s;
    opacity:1;
                }

@keyframes first
{
from {opacity:0.1;}
to {opacity:1;}
}

@-webkit-keyframes first 
{
from {opacity:0.1}
to {opacity:1;}
}

</style>

<div id="a">Hover</div>
<div id="b">show</div>

css
person Manoj    schedule 20.12.2013    source источник
comment
Что вы уже пробовали?   -  person BenM    schedule 20.12.2013
comment
stackoverflow .com/questions/11679567/   -  person Marko Radosevic    schedule 20.12.2013
comment
я еще раз отредактировал проверку кода   -  person Manoj    schedule 20.12.2013

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете легко добиться этого с помощью opacity и adjacent sibling combinator.

Проверьте jsfiddle для версии с префиксом поставщика.

#container + div {
    transition: opacity .25s; 
    opacity: 0;
}

#container:hover + div {
    opacity: 1;
}

Поддержка браузера Transition

Документация по соседним комбинаторам (+ селектор)

person damian    schedule 20.12.2013