彼の親をホバリング時に子要素の不透明度を変更する方法

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が誤っている：「キャッチされない例外TypeError：プロパティを読み取ることができません未定義の 『スタイル』」。ユーザーが<section class="album"...<header>（デフォルトでは不透明度：0.0）を表示したときのアイデアが表示されます。どうすれば修正できますか？もちろん、

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

あなたが所有してセレクタを置き換える：

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

あなたは次のスタイルを設定することができます。

Answer 3

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

あなたが同様にマウスうちに、それを変更しない限り、不透明度は0.6にとどまることに注意してください。cssの解決策は、おそらく維持しやすくなります。