Html 隐藏图像直到悬停

我已经做了一段时间了，似乎无法得到我想要的行为

以下是我所拥有的：

HTML

这接近我想要的。我希望bg图像占据整个

li

。我只希望图像在

li

（或包含元素）的悬停处可见。悬停时，应隐藏

标题

和

说明

，以免干扰图像的查看。

按钮应始终可见。我要寻找的结果正是这把小提琴的行为，除了图像只在悬停时出现

我不能只设置
li
本身的不透明度或可见性，因为它有多个类。我只希望可见性影响背景图像。我也尝试过制作一个
div
并将其放置在
li
中，但我无法再让它填充
li
空间。有什么方法可以做到这一点吗？
只需在
li
标记中添加一个类，然后您就可以使用CSS仅在悬停时显示背景图像。大概是这样的：

HTML:

我不确定是否正确理解了您的问题，但请尝试以下方法：

 <ul class="nopadding">
<div class="container">
    <li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>


.preview-image {
  opacity: 0;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: white;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}



标题
描述

按钮

我无法在CSS端添加图像，因为当我在列表中循环时，每个列表项的图像属性只能通过HTML端使用。您可以使用ID而不是类。这样，您可以在CSS文件中有多个，为每个文件定义不同的图片。这很接近，但我仍然希望在悬停之前可以看到
标题
、
描述
、和
按钮。在我的回答中添加了第二个版本的代码，看看这是否是您所需要的？太好了！没问题：）事实上，对不起，我没注意到。您拥有的CSS使用背景图像属性。我不能在CSS中使用该属性，因为我在CSS端没有访问它的权限。我只在HTML端有它，这就是为什么我用第三个版本更新了
样式
.preview-image {
  opacity: 1;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: white;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

<li class="img-hover">
  ...
</li>

.img-hover:hover {
   background-image: url("https://www.w3schools.com/Html/pic_trulli.jpg");
 }

 <ul class="nopadding">
<div class="container">
    <li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>


.preview-image {
  opacity: 0;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: white;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}