Question

我正在尝试为我的DeviantART编写一个新的精选艺术作品小部件，但我在解决如何让按钮单独悬停方面遇到了一些麻烦，因为他们都强调只有一个是徘徊。 DeviantART的CSS语法无论出于何种原因都不支持div id，因此我唯一的选择是使用类选择器。这让我真的陷入困境，因为我只做过简单的网页设计/布局。任何支持将不胜感激！
*两个元素都使用相同的图像来测试它们。过渡属性也适用于个人测试。

HTML：

<div class="container">
      <img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png"  class="img">
      <div class="middle">
        <div class="text">1</div>
     </div>
    <div class="container">
      <img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
      <div class="middle">
        <div class="text">2</div>
     </div>

CSS：

.container {
    background-color: white;
    position: relative;
    margin: 0 auto;
    width: 500px;
    height: 80px;
}
.img {
  background-color: white;
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  margin: 10px 0;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.container:hover .image {
  opacity: 0.7;
}
.container:hover .middle {
  opacity: 1;
  background-color: transparent;
}
.text {
  text-align: center;
  background-color: #8b9fa6;  
  margin: 0 auto;
  color: white;
  font-size: 20px;
  font-family: abel, sans-serif;
  letter-spacing: 10px;
  opacity: 1;
  width: 500px;
}

Answer 1

您错过了关闭<div class="container"></div>。否则你的代码就可以了。

＆＃13;

.container {
  background-color: white;
  position: relative;
  margin: 0 auto;
  width: 500px;
  height: 80px;
}

.img {
  background-color: white;
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  margin: 10px 0;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.container:hover .image {
  opacity: 0.7;
}

.container:hover .middle {
  opacity: 1;
  background-color: transparent;
}

.text {
  text-align: center;
  background-color: #8b9fa6;
  margin: 0 auto;
  color: white;
  font-size: 20px;
  font-family: abel, sans-serif;
  letter-spacing: 10px;
  opacity: 1;
  width: 500px;
}

＆＃13;

<div class="container">
  <img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
  <div class="middle">
    <div class="text">1</div>
  </div>
</div>
<div class="container">
  <img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
  <div class="middle">
    <div class="text">2</div>
  </div>
</div>

＆＃13;

CSS过渡：按钮不单独悬停

1 个答案: