Простота работы как для текста, так и для фона, но облегчение работы только для текста. Зачем?

Question

Простота работы только для текста и фона, но облегчение работает только для текста, но не для фона.

article { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: #fffff; 
 
    color: #00000; 
 
} 
 

 
article .topnav { 
 
    opacity: 0; 
 
    transition: background-color .9s ease-out; 
 
    transition: background-color .9s ease-in; 
 
    -moz-transition: background-color .9s ease-in; 
 
    -webkit-transition: background-color .9s ease-in; 
 
} 
 

 
article .topnav { 
 
    background: rgba(0,0,0,0); 
 
    transition: opacity .9s ease-out; 
 
    transition: opacity .9s ease-in; 
 
    -moz-transition: opacity .9s ease-in; 
 
    -webkit-transition: opacity .9s ease-in; 
 
} 
 

 
article:hover p.topnav { 
 
    opacity: 0.7; 
 
    background-color: #808080; 
 
} 
 

 
.topnav { 
 
    visibility: invisible; 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 50%; 
 
}

<article> 
 
    <p class="topnav">I am topnav</p> 
 
</article>

Пожалуйста, см fiddle.

Идея заключается в том, что, когда я нахожусь и выхожу, как текст, так и фон легко объединяются и выходят вместе.

Пожалуйста, помогите.

Answer 1

Вы устанавливаете оба перехода в незавершенном состоянии, таким образом, второе переписывает первое правило. Вам необходимо применить правила перехода как к неподвижному, так и к зависающему состоянию.

article { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: #fffff; 
 
    color: #00000; 
 
} 
 

 
article p.topnav { 
 
    opacity: 0; 
 
    background-color: #000; 
 
    transition: all .9s ease-out; 
 
} 
 

 
article:hover p.topnav { 
 
    opacity: 0.7; 
 
    background-color: #808080; 
 
    transition: all .9s ease-in; 
 
} 
 

 
.topnav { 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 50%; 
 
}

<article> 
 
    <p class="topnav">I am topnav</p> 
 
</article>