在懸停時隱藏圖像標題並顯示覆蓋文字

Question

在懸停時隱藏圖像標題並顯示覆蓋文本：我的圖像上面帶有標題（標題）。 我現在想做的是將鼠標懸停在圖像上以刪除標題並顯示其他文本（說明）。

問題在於標題是隱藏的，但其他文本也是隱藏的。

有人可以指出我在哪里錯了嗎？

 $(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/

Answer 1

另一種可能的方法是通過CSS隱藏標題。 您也可以刪除JS部分。 只需將目標hide-on-hover類hide-on-hover在CSS中並添加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> 

我想到的可能是最簡單，最快的方法。

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

Answer 3

為此交換您的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;
                    }
                }
            );

         });