Question

我知道有很多类似这样的问题，但我正在搜索，但我找不到任何可以帮助我的东西，所以我要求新的。

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

jsfiddle.net/raxoes55/3/

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

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

谢谢！

Answer 1

试试这个：

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

Answer 2

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

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

您可以使用 .box-image div的悬停伪选择器，如下所示

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

检查以下工作代码段，它有以下2个修复程序

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

＆＃13;

/*------------------------------*/

/*     #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;
}

＆＃13;

<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-->

＆＃13;

在悬停图像上显示div

2 个答案: