css - 将鼠标悬停在元素上，改变 child 的不透明度？

Question

<li>
    <img src="m.jpg">
    <div class="img-data">img name</div>
</li>

是否可以仅使用 css 在 li 悬停时显示 .img-data？.img-data 当前的不透明度设置为零。

Answer 1

试试这个

ul {
  list-style: none
}

.img-data {
  opacity: 0
}

li:hover .img-data {
  opacity: 1
}

<ul>
  <li>
    <img height="60" src="https://via.placeholder.com/350x150">
    <div class="img-data">img name</div>
  </li>
</ul>