在悬停图像上显示 div

Question

我知道有很多这样的问题，但我一直在搜索，但没有找到任何对我有帮助的东西，所以我提出了新的问题。

好吧，当我将鼠标悬停在图像上时，我希望将不透明度降低到 0.2（这可行）并显示链接图标（这不起作用，我正在尝试我发现的所有内容，我知道的所有内容，但一无所获）

jsfiddle.net/raxoes55/3/

当我将鼠标悬停在 #articles .box .box-image img:hover

上时，我想显示 #articles .box .box-image .hover

谢谢！

Answer 1

而不是选择器来查找悬停图像的相邻图像

#articles .box .box-image img:hover + #articles .box .box-image .hover

你可以使用.box-image div的hover伪选择器如下

#articles .box .box-image:hover .hover

检查以下工作代码 sn-p，它有以下 2 个修复

• 为了使用绝对位置正确定位元素 - 使用相对 div（父级）。在您的代码中，我已将 .hover 父级修改为相对
• 我已指定 z-index 以将绝对 div 置于图像上方

/*------------------------------*/

/*     #ARTICLES SEKCIJA        */

/*------------------------------*/

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 #articlesrow {
  margin-top: 50px;
}
#articles {
  width: 225px;
  height: auto;
  padding: 0;
  margin: 0;
}
#articles .box {
  height: auto;
}
#articles .box .box-image {
  background-color: #00e4ff;
  height: 250px;
  position:relative;
}
#articles .box .box-image .hover {
  position: absolute;
  line-height: 250px;
  left: 45%;
  display: none;
}
#articles .box .box-info {
  margin-top: 20px;
}
#articles .box .box-info .title p {
  font-weight: 400;
}
#articles .box .box-info .date p {
  font-weight: 400;
  font-size: 12px;
  float: left;
}
#articles .box .box-info .see-more {
  float: right;
}
#articles .box .box-info .see-more i:hover {
  color: #006975;
}
#articles .box .box-image img:hover {
  opacity: 0.5;
}
#articles .box .box-image:hover .hover {
  display: block;
  z-index: 10;
}

<div class="news" id="news">
  <div class="container">


    <div class="row" id="articlesrow">

      <div class="col-md-3" id="articles">
        <div class="box">

          <div class="box-image">

            <div class="hover">
              <a href="#"><i class="material-icons  md-24  white">link</i></a>
              <!--[if IE]>
									<a href="#"><i class="material-icons  md-24  white">&#xE157;</i></a>
									<![endif]-->
            </div>

            <img src="https://placehold.it/225x250" alt="">

          </div>
          <!--end of .box-image-->


          <div class="box-info">

            <div class="title">
              <p>Lorem ipsum dolor sit amet, consect adipiscing elit, sed d...</p>
            </div>

            <div class="date">
              <p>22. JULI</p>
            </div>

            <div class="see-more">
              <a href="#"><i class="material-icons  md-24  lg-blue2">trending_flat</i></a>
              <!--[if IE]>
										<a href="#"><i class="material-icons md-24  lg-blue2">&#xE8E4;</i></a>
									<![endif]-->
            </div>

          </div>
          <!-- end of .box-info-->

        </div>
        <!-- end of .box-->
      </div>
      <!-- end of .col-md-3-->

    </div>
    <!--end of .row-->




  </div>
  <!--end of .container-->
</div>
<!--end of .news-->

Answer 2

试试这个：

#articles .box .box-image:hover .hover {
  display: block;
}