首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在悬停之前隐藏图像

在悬停之前隐藏图像
EN

Stack Overflow用户
提问于 2018-06-08 08:57:32
回答 2查看 2.1K关注 0票数 1

我在这方面已经有一段时间了,似乎不能得到我想要的行为。

下面是我的基本情况:

HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
.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 (或包含的元素)悬停时可见。悬停时,应隐藏TitleDesc,以便它们不会干扰图像的查看。Button应该始终保持可见。我正在寻找的结果正是这个小提琴的行为,除了图像只有在悬停时才能看到。

我不能仅仅设置li本身的不透明度或可见性,因为它有多个类。我只想让可见性影响背景图像。我还尝试过制作一个div并将其放入li中,但我无法再让它填充li空间。有什么办法可以做到这一点吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-08 09:20:52

我不确定我是否正确理解了你的问题,但试试这个:

代码语言:javascript
复制
 <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;
}

编辑:试着这样做:

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
 <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中不带背景图像:

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
 <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>

票数 2
EN

Stack Overflow用户

发布于 2018-06-08 09:09:19

只需向li标记添加一个类,然后您就可以使用CSS仅显示悬停时的背景图像。如下所示:

HTML:

代码语言:javascript
复制
<li class="img-hover">
  ...
</li>

CSS:

代码语言:javascript
复制
.img-hover:hover {
   background-image: url("https://www.w3schools.com/Html/pic_trulli.jpg");
 }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50751968

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档