如何为显示按钮创建 css 悬停效果

Question

我是编程初学者，我正在尝试创建具有悬停效果的卡片。将鼠标悬停在卡片上时，我想为卡片添加不透明度并显示 4 个按钮，一个在另一个上方。你能帮帮我吗？

下面是我的代码。

.cardnew {
  height          : 256px;
  text-align      : center;
  width           : 246px;
  background      : #ffffff;
  margin          : 20px;
  display         : inline-block;
  box-shadow      : 1px 1px 22px rgba(157, 184, 209, 0.19);
  border-radius   : 1px;
  cursor          : pointer;
  transition      : 0.15s linear;
  }
.cardnew > img {
  height          : 150px;
  width           : 100%;
  border-radius   : 10px 10px 0 0;
  padding         : 35px 0 5px 0;
  }
.cardnew > h1 {
  font-size       : 22px;
  color           : #5c5c5c;
  padding         : 15px 0 5px 0;
  font-weight     : 100;
  }
.cardnew > p {
  font-size       : 13px;
  color           : #cdcdcd;
  padding         : 0 40px;
  line-height     : 20px;
  }
.cardnew > a {
  padding         : 13px;
  font-weight     : normal;
  width           : 260px;
  color           : #2687f1;
  border          : 2px solid #2687f1;
  border-radius   : 7px;
  margin          : auto;
  margin-top      : 35px;
  display         : block;
  transition      : 0.2s linear;
  }
.cardnew:hover {
  transform       : scale(1.015);
  transition      : 0.15s linear;
  box-shadow      : 1px 1px 22px rgba(157, 184, 209, 0.5);
  }
.cardnew:hover > a {
  padding         : 13px;
  width           : 260px;
  color           : #fff;
  background      : #2687f1;
  border-radius   : 7px;
  margin          : auto;
  margin-top      : 35px;
  transition      : 0.2s linear;
  }
.row-card {
  justify-content : space-around;
  flex-wrap       : wrap;
  margin-right    : -12.5px;
  margin-left     : -12.5px;
  }

<div class="row-card">
    <div class="cardnew">
      <img src="https://enginehosting-html.fruitfulcode.com/wp-content/themes/enginehosting-html/assets/images/server.svg" style="padding: 60px 0 5px 0;height: 125px;" />
      <h1>
        name 
      </h1>
      <p>firstname</p>
      <div class="button"><a href="#"> BUTTON </a>
      <div class="button"><a href="#"> BUTTON </a>
      <div class="button"><a href="#"> BUTTON </a>
      <div class="button"><a href="#"> BUTTON </a>
    </div>
</div>

我尝试了一些在 MDN 和 youtube 上找到的教程，但无法实现。任何帮助都会有很大帮助。你能帮帮我吗？

喜欢这支笔：https://codepen.io/philcheng/pen/YWyYwG

Answer 1

未应用按钮样式的原因是您拥有的所有 >。如果你删除它们，它似乎工作得更好。此外，您有很多 div 未在底部关闭。这有什么原因吗？

对于消失，您可以使用 opacity 属性让它们消失并在悬停时重新出现。

.cardnew {
  height: 256px;
  text-align: center;
  width: 246px;
  background: #ffffff;
  margin: 20px;
  display: inline-block;
  box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19);
  border-radius: 1px;
  cursor: pointer;
  transition: 0.15s linear;
}

.cardnew img {
  height: 150px;
  width: 100%;
  border-radius: 10px 10px 0 0;
  padding: 35px 0 5px 0;
}

.cardnew h1 {
  font-size: 22px;
  color: #5c5c5c;
  padding: 15px 0 5px 0;
  font-weight: 100;
}

.cardnew p {
  font-size: 13px;
  color: #cdcdcd;
  padding: 0 40px;
  line-height: 20px;
}

.cardnew a {
  padding: 13px;
  font-weight: normal;
  width: 260px;
  color: #2687f1;
  border: 2px solid #2687f1;
  border-radius: 7px;
  margin: auto;
  margin-top: 35px;
  display: block;
  opacity: 0;
  transition: 0.2s linear;
}

.cardnew:hover {
  transform: scale(1.015);
  transition: 0.15s linear;
  box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.5);
}

.cardnew:hover a {
  padding: 13px;
  width: 260px;
  color: #fff;
  background: #2687f1;
  border-radius: 7px;
  margin: auto;
  margin-top: 35px;
  opacity: 1;
  transition: 0.2s linear;
}

.row-card {
  justify-content: space-around;
  flex-wrap: wrap;
  margin-right: -12.5px;
  margin-left: -12.5px;
}

<div class="row-card">
  <div class="cardnew">
    <img src="https://enginehosting-html.fruitfulcode.com/wp-content/themes/enginehosting-html/assets/images/server.svg" style="padding: 60px 0 5px 0;height: 125px;" />
    <h1>
      name
    </h1>
    <p>firstname</p>
    <div class="button"><a href="#"> BUTTON </a>
      <div class="button"><a href="#"> BUTTON </a>
        <div class="button"><a href="#"> BUTTON </a>
          <div class="button"><a href="#"> BUTTON </a>
          </div>
        </div>

编辑： 我把你的代码弄乱了，我想我已经创建了像你的图片一样的东西。

（您可能需要修改这些值才能使它们完美。）

.overlay {
  background: rgba(0, 0, 0, 0.5);
  height: 256px;
  width: 246px;
  position: absolute;
  opacity: 0;
  transition: 0.2s linear;
}

.cardnew a {
  position: absolute;
  padding: 13px;
  font-weight: normal;
  width: 160px;
  color: #2687f1;
  border: 2px solid #2687f1;
  border-radius: 7px;
  margin: auto;
  margin-top: 35px;
  display: block;
  opacity: 0;
  transition: 0.2s linear;
}

.cardnew:hover a {
  transform: scale(1);
  padding: 13px;
  color: #fff;
  background: #2687f1;
  border-radius: 7px;
  margin: auto;
  margin-top: 35px;
  opacity: 1;
  transition: 0.2s linear;
}

.btn1 {
  top: 10px;
  left: 42.5px;
}

.btn2 {
  top: 65px;
  left: 42.5px;
}

.btn3 {
  top: 120px;
  left: 42.5px;
}

.btn4 {
  top: 175px;
  left: 42.5px;
}

.cardnew {
  height: 256px;
  text-align: center;
  width: 246px;
  background: #ffffff;
  margin: 20px;
  display: inline-block;
  box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19);
  border-radius: 1px;
  cursor: pointer;
  transition: 0.15s linear;
}

.cardnew img {
  height: 150px;
  width: 100%;
  border-radius: 10px 10px 0 0;
  padding: 35px 0 5px 0;
}

.cardnew h1 {
  font-size: 22px;
  color: #5c5c5c;
  padding: 15px 0 5px 0;
  font-weight: 100;
}

.cardnew p {
  font-size: 13px;
  color: #cdcdcd;
  padding: 0 40px;
  line-height: 20px;
}

..cardnew:hover {
  transform: scale(1.015);
  transition: 0.15s linear;
  box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.5);
}

.cardnew:hover .overlay {
  opacity: 1;
}

.row-card {
  justify-content: space-around;
  flex-wrap: wrap;
  margin-right: -12.5px;
  margin-left: -12.5px;
}

<div class="row-card">
  <div class="cardnew">
    <div class='overlay'>
    </div>
    <img src="https://enginehosting-html.fruitfulcode.com/wp-content/themes/enginehosting-html/assets/images/server.svg" style="padding: 60px 0 5px 0;height: 125px;" />
    <h1>
      name
    </h1>
    <p>firstname</p>
    <div class="button"><a href="#" class="btn1"> BUTTON </a></div>
    <div class="button"><a href="#" class="btn2"> BUTTON </a></div>
    <div class="button"><a href="#" class="btn3"> BUTTON </a></div>
    <div class="button"><a href="#" class="btn4"> BUTTON </a></div>
  </div>
</div>

这是代码笔：click here

如何为显示按钮创建 css 悬停效果

How to create a css hover effect for show button

html

css

flexbox

css-transitions