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

How to change opacity of child-element when hovering his parent

本文关键字：元素 何更改 不透明度 悬停      更新时间：2024-07-02
<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有些原因是错误的："未捕获的类型错误：无法读取未定义的属性'样式'"。这个想法是当用户悬停<section class="album"...里面的<header>(默认情况下不透明度：0.0(变得可见时。我该如何解决这个问题？

您可以设置以下样式：

.parent:hover .child {
   opacity: 0.5;
}
当然，将选择器

替换为您自己的选择器。

根据您在@GMchris答案评论中的问题，这里有一个带有动画的示例：

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

Plunker示例：单击此处

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

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

相关文章：