悬停时在卡片中显示内容答案

【问题标题】：Display content in the card when hover悬停时在卡片中显示内容
【发布时间】：2021-11-22 21:39:38
【问题描述】：

如图所示，我有一个卡片项目，不透明度为 0.5：

当我悬停时，我想再次显示一些信息，就像图片中一样：

这是我的例子；

.card-img {
  width: 100%;
  border-radius: calc(0.3rem - 0px);
}

.card-img-top {
  width: 100%;
  border-radius: 32px;
  opacity: 0.5;
}

.card-img-top:hover {
  opacity: 1;
}

<div class="col-md-6">
  <div class="card">
    <a href="#">
      <img class="card-img-top img-raised" src="img/banner-1.png" alt="Open Project 1">
      <div class="banner-content">
        Description
      </div>
      <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
    </a>
  </div>
</div>

所以我在这个例子中想要实现的是，当我悬停时我想显示描述（横幅内容）并且我想将不透明度设置为 1，我已经在做。

【问题讨论】：

当您悬停要显示 div.banner-content 的 img 时？这个 div 隐藏了吗？
是的，一开始横幅内容是隐藏的。我希望它在悬停时显示。
调查兄弟选择器 + 当您将鼠标悬停在 img 上时，您还可以选择其直接兄弟并将其设置为显示块，例如。

标签： html css hover styles

【解决方案1】：

当您将鼠标悬停在img 和display 内容上时，放置一个相邻兄弟选择器。

+ 在这里使用，它选择紧跟在.card-img-top 元素之后的第一个.banner-content 元素。
Find more info here about combinators

.card {
  position: relative;
}

.banner-content {
  position: absolute;
  top: 20px;
  left: 20px;
  display:none;
}

.card-img {
  width: 100%;
  border-radius: calc(0.3rem - 0px);
}

.card-img-top {
  width: 400px;
  height:200px;
  border-radius: 32px;
  opacity: 0.5;
}

.card-img-top:hover {
  opacity: 1;
}

.card-img-top:hover + .banner-content {
  display: block;
}

<div class="col-md-6">
  <div class="card">
    <a href="#">
      <img class="card-img-top img-raised" src="https://pixy.org/src/477/4774988.jpg" alt="Open Project 1">
      <div class="banner-content">
        I am a new coder.<br> Happy to meet : )

      </div><br>
      <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
    </a>
  </div>
</div>

【讨论】：

【解决方案2】：

第 1 步：我使用 opacity: 0 创建了一个 .top-layout 类以使其默认隐藏。

第 2 步：使用 CSS 中的 .card:hover .top-layout 选择器设置卡片项悬停时所需的样式。

.card {
  width: 100%;
  border-radius: calc(0.3rem - 0px);
}

.card:hover .top-layout {
  opacity: 0.5 !important;
}

.top-layout {
  opacity: 0;
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}

.card-img-top {
  width: 100%;
  border-radius: 32px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-6">
  <div class="card">
    <a href="#">
      <img class="card-img-top img-raised" src="https://image.freepik.com/free-vector/comic-colorful-frame-background_52683-71995.jpg" alt="Open Project 1">
      <div class="top-layout">
        <div class="banner-content">
          Description
        </div>
        <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
      </div>
    </a>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以使用+ 选择器来选择相邻的兄弟。更多关于mdn

.card{
  position:relative;
}
.card-img {
  width: 100%;
  max-width:150px;
  border-radius: calc(0.3rem - 0px);
  
}

.card-img-top {
  border-radius: 32px;
  opacity: 0.5;
  width:150px;
}

.card-img-top:hover {
  opacity: 1;
}

.banner-content{
  position:absolute;
  top:0;
  left:0;
  display:none;
}

.card-img-top:hover + .banner-content{display:block;}

<div class="col-md-6">
  <div class="card">
    <a href="#">
      <img class="card-img-top img-raised" src="https://via.placeholder.com/50" alt="Open Project 1">
      <div class="banner-content">
        Description
      </div>
      <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
    </a>
  </div>
</div>

【讨论】：