在悬停另一个时显示隐藏的元素

Question

我正在尝试将图片和标题悬停，隐藏的内容可见。我做了一些悬停外部div的东西，但现在如果我悬停在空白区域或段落上效果是一样的。如何在图像和标题悬停时影响隐藏元素？也许我做错了。

＆＃13;

＆＃13;

.box {
  width: 320px;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
}

.image>a {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.image>a:after {
  background: rgba(255, 99, 71, 0.75);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
  content: '';
  display: block;
}

.details {
  position: absolute;
  top: 80%;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.box:hover .image>a:after {
  opacity: 1;
}

.box:hover .details {
  top: 30%;
  opacity: 1;
}

＆＃13;

<div class="box">
  <div class="image">
    <a href="#">
      <img src="https://via.placeholder.com/320x170">
    </a>
  </div>

  <h1 class="title">
    <a href="#">Lorem Ipsum</a>
  </h1>

  <div class="details">
    <a href="#">Hidden link</a>
  </div>
  
  <div class="summary">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须重新构建HTML

我已将.image和.details置于另一个div内，并将悬停事件添加到新div，而不仅仅是.box

试试这个：

.box {
  width: 320px;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
}

.image>a {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.image>a:after {
  background: rgba(255, 99, 71, 0.75);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
  content: '';
  display: block;
}

.details {
  position: absolute;
  top: 80%;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.box:hover .hoverEffect:hover .image>a:after {
  opacity: 1;
}

.box:hover .hoverEffect:hover .details {
  top: 30%;
  opacity: 1;
}

<div class="box">
  <div class="hoverEffect">
     <div class="image">
       <a href="#">
         <img src="https://via.placeholder.com/320x170">
       </a>
     </div>
     <div class="details">
       <a href="#">Hidden link</a>
     </div>
     <h1 class="title">
       <a href="#">Lorem Ipsum</a>
     </h1>
  </div>
  
  <div class="summary">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
</div>

Answer 2

您应该定位作为link标记的父级的div类，在本例中为class = details

默认情况下：

.details {

display: none; 

}

While on Hover state

.details{
display : block; 

}