在悬停之前隐藏图像
在悬停之前隐藏图像
提问于 2018-06-08 08:57:32
我在这方面已经有一段时间了，似乎不能得到我想要的行为。
下面是我的基本情况：
HTML
<ul>
<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>背景图像url必须作为HTML的一部分完成，因为我正在循环通过一个项目列表，每个项目都有一个图像属性。上面的图像url是一个示例图像。在实际代码中，它是{{ item.image }}，它只能通过超文本标记语言访问。
CSS
.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;
}这个fiddle很接近我想要的。我希望bg图像占据整个li。我只希望图像在li (或包含的元素)悬停时可见。悬停时，应隐藏Title和Desc，以便它们不会干扰图像的查看。Button应该始终保持可见。我正在寻找的结果正是这个小提琴的行为，除了图像只有在悬停时才能看到。
我不能仅仅设置li本身的不透明度或可见性，因为它有多个类。我只想让可见性影响背景图像。我还尝试过制作一个div并将其放入li中，但我无法再让它填充li空间。有什么办法可以做到这一点吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-08 09:20:52
我不确定我是否正确理解了你的问题，但试试这个：
<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;
}编辑:试着这样做：
.preview-image {
background-image: none;
width: 100vw;
}
.nopadding {
padding: 0!important;
}
.container:hover .preview-image {
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;
}
.container:hover .txt-container {
opacity: 0;
}
.txt-container {
opacity: 1;
font-weight: bold;
color: black;
}
.btn {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
} <ul class="nopadding">
<div class="container">
<li class="preview-image">
<div class="txt-container">
<a>Title</a>
<p>Desc</p>
</div>
<a class="btn">Button</a>
</li>
</div>
</ul>
编辑:在CSS中不带背景图像：
.preview-image {
background-size: 0 0;
width: 100vw;
}
.nopadding {
padding: 0!important;
}
.container:hover .preview-image {
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
height: 100px;
}
.container:hover .txt-container {
opacity: 0;
}
.txt-container {
opacity: 1;
font-weight: bold;
color: black;
}
.btn {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
} <ul class="nopadding">
<div class="container">
<li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg);">
<div class="txt-container">
<a>Title</a>
<p>Desc</p>
</div>
<a class="btn">Button</a>
</li>
</div>
</ul>
Stack Overflow用户
发布于 2018-06-08 09:09:19
只需向li标记添加一个类，然后您就可以使用CSS仅显示悬停时的背景图像。如下所示：
HTML：
<li class="img-hover">
...
</li>CSS：
.img-hover:hover {
background-image: url("https://www.w3schools.com/Html/pic_trulli.jpg");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50751968
复制相关文章
相似问题
腾讯云开发者
