将鼠标悬停在元素上，改变孩子的不透明度？

Question

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

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

Answer 1

试试这个

＆＃13;

＆＃13;

ul {
  list-style: none
}

.img-data {
  opacity: 0
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;