时间戳

首页 > 解决方案 > 悬停时图像消失如何防止按钮也这样做

html - 悬停时图像消失如何防止按钮也这样做

问题描述

我做了一个小照片库。

当您将鼠标悬停在图像上时，一个按钮应该出现在中间并且图像

应该淡入背景。

我有这个工作除了一部分：

该按钮会随着不应该出现的背景消失。

该按钮应在悬停时保持可见。

html {
  background-color: #c3cfe2;
}

.container {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}

.container__item {
  background-image: url("https://images.unsplash.com/photo-1525382455947-f319bc05fb35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1414&q=80");
  position: relative;
  width: 400px;
  height: 400px;
  border: 10px solid white;
  border-radius: 3%;
  margin: 20px;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
  -o-object-fit: contain;
     object-fit: contain;
  background-size: contain;
}

.container__button {
  color: white;
  background-color: darkblue;
  position: relative;
  font-size: 15px;
  padding: 30px;
  left: 180px;
  top: 180px;
  opacity: 0;
}

.container__item:hover > .container__button {
  opacity: 1;
}

.container__item:hover {
  opacity: 0.2;
}

@media screen and (min-width: 600px) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .container__item {
    width: 330px;
    height: 330px;
  }
}

@media screen and (min-width: 1000px) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 1000px;
  }
  .container__item {
    width: 250px;
    height: 250px;
  }
}
/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>

<html>
  <meta charset="utf-8">
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>.</title>
  </head>
  <body>
<div class="container">
  <div class="container__item"><button class="container__button">hello</button></div>
  <div class="container__item"><button class="container__button">hello</button></div>
  <div class="container__item"><button class="container__button">hello</button></div>
  <div class="container__item"><button class="container__button">hello</button></div>
  <div class="container__item"><button class="container__button">hello</button></div>
  <div class="container__item"><button class="container__button">hello</button></div>
  <div class="container__item"><button class="container__button">hello</button></div>
  <div class="container__item"><button class="container__button">hello</button></div>
  
</div>
</body>

</html>

按钮有 opacity:0 所以它是不可见的，除非你将鼠标悬停在图像上

图像在 &__item 中声明

&__item:hover {
opacity: 0.2;
  }

  &__item:hover > &__button {
    opacity: 1;
  }

标签： htmlcsshover

解决方案

我建议您使用这样的单独容器：

<div class="separate_container"> <div class="container__item"></div> <button class="container__button">hello</button> </div>

在样式方面，.container_item获取图像，您可以轻松操作

.separate_container:hover > .container_button { opacity:1 }

推荐阅读