如何在悬停父级时更改子元素的不透明度

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 为什么是错误的：“未捕获的TypeError：无法读取未定义的属性'样式'”。这个想法是当用户将<section class="album"...内部<header>（默认情况下，不透明度：0.0）变为可见时。我该如何解决这个问题？

Answer 1

您可以设置以下样式：

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

当然，用你自己的替换选择器。

Answer 2

根据你在@GMchris回答的评论中提出的问题，这里有一个动画示例：

A01-A20

Plunker示例：click here

Answer 3

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

请注意，不透明度将保持.6，除非您在鼠标输出时更改它。 css解决方案可能更容易维护。