时间戳

首页 > 解决方案 > 悬停时在卡片中显示内容

html - 悬停时在卡片中显示内容

问题描述

如图所示，我有一个卡片项目，不透明度为 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，我已经在做。

标签： htmlcsshoverstyles

解决方案

您可以使用+选择器来选择相邻的兄弟。更多关于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>

推荐阅读