在悬停时隐藏图像标题并显示覆盖文字

时间：2019-03-26 13:27:18

标签： javascript jquery html css hover

在悬停时隐藏图像标题并显示覆盖文本：我的图像上面带有标题（标题）。我现在想做的是将鼠标悬停在图像上以删除标题并显示其他文本（说明）。

问题在于标题被隐藏，其他文本也被隐藏。

有人可以指出我这里错了吗？

$(document).ready(function() {

  $('.overlay').hide();
  $('.section-solution').hover(
    function() {
      $('.hide-on-hover').hide();
      $('.text').show();
    },

    function() {
      $('.hide-on-hover').show();
      $('.text').hide();
    }
  );

});
.container-img {
  position: relative;
  padding: 20px;
}

.wp-caption {
  position: relative;
  padding: 0;
  margin: 0;
}

.fullwidth-img img {
  margin-bottom: 70px;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.wp-caption img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wp-caption-text {
  display: block;
  position: absolute;
  width: 100%;
  color: #fff;
  left: 0;
  bottom: 0;
  padding: 4em;
  font-weight: 700;
  z-index: 2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wp-caption-text p {
  color: white;
  font-size: 26px;
  font-weight: 500;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 2em;
}

.container-img:hover .overlay {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="section-solution ">
  <div class="container">
    <div class="row">
      <div class="container-img fullwidth-img" id="last">
        <figure class="wp-caption">
          <div class="demo">
            <img width="300" height="200" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwMC8zNDkvb3JpZ2luYWwvc2liZXJpYW4tdGlnZXIuanBn">
          </div>
          <div class="overlay">
            <div class="text">
              <figcaption class="wp-caption-text on-hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
            </div>
          </div>
          <figcaption class="wp-caption-text">
            <p class="hide-on-hover">
              Lorem ipsum
            </p>
          </figcaption>
        </figure>
      </div>

    </div>
  </div>

</section>

小提琴 https://jsfiddle.net/98j07g4k/1/

3 个答案:

答案 0 :(得分：3)

另一种可能的方法是通过CSS隐藏标题。您也可以删除JS部分。只需在CSS中定位类hide-on-hover，然后添加display: none;

这是什么样子

.container-img {
    position: relative;
    padding: 20px;
}

.wp-caption {
    position: relative;
    padding: 0;
    margin: 0;
}

.fullwidth-img img {
    margin-bottom: 70px;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    display: block;
    position: absolute;
    width: 100%;
    color: #fff;
    left: 0;
    bottom: 0;
    padding: 4em;
    font-weight: 700;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.wp-caption-text p {
    color: white;
    font-size: 26px;
    font-weight: 500;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 2em;
}

.container-img:hover .overlay {
  opacity: 1;
}

.container-img:hover .hide-on-hover {
  display: none;
}
<section class="section-solution ">
<div class="container">
    <div class="row">
                    <div class="container-img fullwidth-img" id="last">
                        <figure class="wp-caption">
                            <div class="demo">
                                <img width="300" height="200" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwMC8zNDkvb3JpZ2luYWwvc2liZXJpYW4tdGlnZXIuanBn">
                            </div>
                            <div class="overlay">
                              <div class="text"><figcaption class="wp-caption-text on-hover"><p class="show_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></figcaption></div>
                            </div>                            
                            <figcaption class="wp-caption-text">
                              <p class="hide-on-hover">
                              Lorem ipsum
                              </p>
                            </figcaption>
                        </figure>
                    </div>                    
                       
</div>
</div>

</section>

可能是我能想到的最简单，最快的方法。

答案 1 :(得分：2)

将$('.overlay').hide();从将起作用的代码中删除。

$(document).ready(function() {

  
  $('.section-solution').hover(
    function() {
      $('.hide-on-hover').hide();
      $('.show_text').show();
    },

    function() {
      $('.hide-on-hover').show();
      $('.show_text').hide();
    }
  );

});
.container-img {
    position: relative;
    padding: 20px;
}

.wp-caption {
    position: relative;
    padding: 0;
    margin: 0;
}

.fullwidth-img img {
    margin-bottom: 70px;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    display: block;
    position: absolute;
    width: 100%;
    color: #fff;
    left: 0;
    bottom: 0;
    padding: 4em;
    font-weight: 700;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.wp-caption-text p {
    color: white;
    font-size: 26px;
    font-weight: 500;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 2em;
}

.container-img:hover .overlay {
  opacity: 1;
}
<section class="section-solution ">
<div class="container">
    <div class="row">
                    <div class="container-img fullwidth-img" id="last">
                        <figure class="wp-caption">
                            <div class="demo">
                                <img width="300" height="200" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwMC8zNDkvb3JpZ2luYWwvc2liZXJpYW4tdGlnZXIuanBn">
                            </div>
                            <div class="overlay">
                              <div class="text"><figcaption class="wp-caption-text on-hover"><p class="show_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></figcaption></div>
                            </div>                            
                            <figcaption class="wp-caption-text">
                              <p class="hide-on-hover">
                              Lorem ipsum
                              </p>
                            </figcaption>
                        </figure>
                    </div>                    
                       
</div>
</div>

</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

答案 2 :(得分：2)

为此交换您的javascript文件，我将在代码中添加注释以供理解。

  $(document).ready(function() {

        var trade = true; // variable that controls whether the mouse was on 
                          // top of the image and left.

        $('.overlay').hide();
            $('.section-solution').hover(
                function () {
                    if(trade) {
                      $('.hide-on-hover').html("test");
                      $('.text').show();
                      trade = false;
                    } else {
                        // Here I set new text that can be any text just 
                        // need pass to html.
                        $('.hide-on-hover').html("Lorem ipsum");
                      trade = true;
                    }
                }
            );

         });
相关问题
最新问题