Как изменить непрозрачность ребенка-элемента при наведении его родителя

Question

<section class="album" role="listitem" onmouseover="this.albumHeader.style.opacity = 0.6"> 
    <a href="@HrefHelper.ToAlbum(album.Title, 0)"> 
     <img src="@albumPreview.GenerateSrcHTML()" height="@albumPreview.PreviewHeight" width="@albumPreview.PreviewWidth" /> 
    </a> 
    <header id="albumHeader"> 
     <p>@album.Title</p> 
    </header> 
</section> 

Этот JS-код: this.albumHeader.style.opacity = 0.6 somewhy является ошибочным: «Uncaught TypeError: Не удается прочитать свойство„стиль“неопределенной». Идея заключается в том, что пользователь наводит <section class="album"... на <header> внутри (который по умолчанию непрозрачность: 0.0) становится видимым. Как я могу это исправить?

Answer 1

Основываясь на ваш вопрос в комментарии @GMchris ответа, вот пример с анимацией:

section.album header { 
    opacity: 0; 
    transition: opacity 0.25s ease-in-out; 
} 

section.album:hover > header { 
    opacity: 0.6; 
} 

Plunker пример: click here

Answer 2

Вы можете установить следующие стили:

.parent:hover .child { 
    opacity: 0.5; 
} 

Конечно, заменить селекторы с вами самостоятельно.

Answer 3

onmouseover="document.getElementById('albumHeader').style.opacity = 0.6" 

Обратите внимание, что непрозрачность останется .6, если вы не измените ее и на мышь. Решение css, вероятно, будет проще поддерживать.