Question

我有一个与网页的悬停效果有关的问题。

我有一幅图片，下面带有图片的文字说明。当鼠标指针悬停在图片上时，图片应该消失，并且图片的文字说明应该出现-在这种情况下，我的代码有效。

但是当鼠标指针悬停在文字说明上时，图片将重新出现，文字说明将消失。我不希望这种情况发生。有人可以帮我吗？

在线验证码：https://codepen.io/rlinkpl/pen/LYGQLja

<div class="container-fluid cont-fld">
        <div class="row mt-3">
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/ogrody-wertykalne/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/OGORDY-WERTYKLANE.jpg" class="img-fluid hover-img mt-4" alt="Ogrody wertykalne">
                        <p class="img__description">Ogrody wertykalne</p>
                    </a>
                </div>
            </div>
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/architektura-krajobrazu/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/ARCHITEKTURA-KRAJOBRAZU.jpg" class="img-fluid hover-img mt-4" alt="Architektura krajobrazu">
                        <p class="img__description">Architektura krajobrazu</p>
                    </a>
                </div>
            </div>
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/zielen-we-wnetrzach/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/ZIELEŃ-WE-WNĘTRZACH.jpg" class="img-fluid hover-img mt-4" alt="Zielenie we wnętrzach">
                        <p class="img__description">Zielenie we wnętrzach</p>
                    </a>
                </div>
            </div>
                    </div>
    </div>

.home-description{
   padding: 51px 170px 0px 170px;
}

.home-description p{
  font-family:'Lato';
  font-weight: 300;
  font-size: 20px;
  color: #333333;
  line-height: 25px;
}

.img__wrap {
  position: relative;
}

 p.img__description {
  opacity: 0;
  position: absolute;
  bottom: 45%;
  left: 0;
  right: 0;
  text-align: center;
  margin:0 auto;
  font-family:'Lato';
  font-weight: 300;
  font-size: 25px;
  color: #000000;
  line-height: 35px;
  text-transform: uppercase;
   
}

.hover-img:hover {
  opacity: 0;
}

.hover-img:hover + .img__description {
  opacity: 1;
}

Answer 1

.home-description{
   padding: 51px 170px 0px 170px;
}

.home-description p{
  font-family:'Lato';
  font-weight: 300;
  font-size: 20px;
  color: #333333;
  line-height: 25px;
}

.img__wrap {
  position: relative;
}

 p.img__description {
  opacity: 0;
  position: absolute;
  bottom: 45%;
  left: 0;
  right: 0;
  text-align: center;
  margin:0 auto;
  font-family:'Lato';
  font-weight: 300;
  font-size: 25px;
  color: #000000;
  line-height: 35px;
  text-transform: uppercase;
   
}

.hover-img:hover {
  opacity: 0;
}

.hover-img:hover + .img__description {
  opacity: 1;
} 

.offers-homepage:hover .hover-img { 
   opacity: 0; 
} 

.offers-homepage:hover .hover-img + .img__description { 
   opacity: 1; 
}

<div class="container-fluid cont-fld">
        <div class="row mt-3">
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/ogrody-wertykalne/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/OGORDY-WERTYKLANE.jpg" class="img-fluid hover-img mt-4" alt="Ogrody wertykalne">
                        <p class="img__description">Ogrody wertykalne</p>
                    </a>
                </div>
            </div>
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/architektura-krajobrazu/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/ARCHITEKTURA-KRAJOBRAZU.jpg" class="img-fluid hover-img mt-4" alt="Architektura krajobrazu">
                        <p class="img__description">Architektura krajobrazu</p>
                    </a>
                </div>
            </div>
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/zielen-we-wnetrzach/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/ZIELEŃ-WE-WNĘTRZACH.jpg" class="img-fluid hover-img mt-4" alt="Zielenie we wnętrzach">
                        <p class="img__description">Zielenie we wnętrzach</p>
                    </a>
                </div>
            </div>
                    </div>
    </div>

Answer 2

$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -list -v

悬停效果问题-悬停效果消失

2 个答案: