时间戳

首页 > 解决方案 > 如何让两种悬停效果都发生？

html - 如何让两种悬停效果都发生？

问题描述

我想要发生的是，只要光标位于 img 中的任何位置，两种悬停效果都会发生。但是，除非光标位于中心，否则不会出现文本的 div 悬停效果，此时 img 悬停结束。

我尝试过移动相对和绝对定位，因为我认为这可能是问题所在，但它并没有改变任何东西。我尝试更改显示和转换，但这些也没有解决。

.pictures li {
  display: block;
  float: right;
  clear: right;
  position: relative;
  margin-bottom: 2.8rem;
}

.photo img {
  opacity: 1;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.photo img:hover {
  opacity: 0.7;
  transform: scale(1.13);
}

.photo div:hover {
  opacity: 1;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.text {
  background-color: #8b0000;
  color: white;
  font-size: 16px;
  padding: 16px 16px;
}
          <ul class="pictures">
            <li>
              <figure class="photo">
                <img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png" alt="Currency converter">
                <div class="middle">
                  <div class="text">Open</div>
                </div>
              </figure>
            </li>
            <li>
              <figure class="photo">
                <img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png">
                <div class="middle">
                  <div class="text">Open</div>
                </div>
              </figure>
            </li>
            <li>
              <figure class="photo">
                <img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png">
                <div class="middle">
                  <div class="text">Open</div>
                </div>
              </figure>
            </li>
          </ul>

标签： htmlcss

解决方案

将鼠标悬停在 div 上.photo，然后设置 div 样式。

.pictures li {
  display: block;
  float: right;
  clear: right;
  position: relative;
  margin-bottom: 2.8rem;
}

.photo img {
  opacity: 1;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.photo:hover img {
  opacity: 0.7;
  transform: scale(1.13);
}

.photo:hover div {
  opacity: 1;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.text {
  background-color: #8b0000;
  color: white;
  font-size: 16px;
  padding: 16px 16px;
}
<ul class="pictures">
            <li>
              <figure class="photo">
                <img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png" alt="Currency converter">
                <div class="middle">
                  <div class="text">Open</div>
                </div>
              </figure>
            </li>
            <li>
              <figure class="photo">
                <img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png">
                <div class="middle">
                  <div class="text">Open</div>
                </div>
              </figure>
            </li>
            <li>
              <figure class="photo">
                <img src="https://www.taemana.com/wp-content/uploads/2017/09/team-placeholder.png">
                <div class="middle">
                  <div class="text">Open</div>
                </div>
              </figure>
            </li>
          </ul>

推荐阅读