將鼠標懸停在圖像上時顯示文字

當鼠標懸停在圖像上時，我想同時切換到另一圖像並顯示文字。我已成功更改爲懸停中的其他圖片，但我不知道如何顯示文字。我也想自定義文本（顏色，大小，位置）。我的代碼：將鼠標懸停在圖像上時顯示文字

<section id="works"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="desktop-12 columns"><div class="border-top"></div></div> 
 

 
\t \t \t 
 
\t \t \t \t <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>Bird</h3> 
 
\t \t \t \t \t \t \t <span class="category">Illustration</span> 
 

 
\t \t \t \t \t \t \t <img src="images/thumb_item01.png" onmouseover="this.src='images/thumb_item01a.png';" onmouseout="this.src='images/thumb_item01.png';"/> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
        <div class="clear"></div> 
 
\t \t \t \t </a> 
 
\t \t \t \t </div></section>

謝謝。

來源

2016-10-01 Phuong

你能發佈完整的HTML嗎？ –

我已經使用完整的代碼編輯過帖子，請檢查，謝謝 – Phuong

你想顯示什麼樣的文本？有一個標題屬性，您可以使用圖片來簡單顯示標題。您也可以使用css：hover僞類來顯示某人懸停在父元素上的內容。 –

使用CSS :hover顯示文本，這裏的兄弟選擇+

，並通過使用一個類你的CSS規則，這樣.showtext:hover + div使用，你只需要一個爲所有的文本，在相反的id，這需要根據註釋，對於每個文本

更新獨特

要對圖像的頂部我加了包裝他們周圍的文本和給文本在一個查詢中的位置

.imgwrapper { 
 
    position: relative; 
 
} 
 
.showtext + div { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    display: none; 
 
    pointer-events: none; 
 
    font-size: 24px; 
 
    width: 250px; 
 
} 
 
.showtext:hover + div { 
 
    display: block; 
 
}

<section id="works"> 
 
    <div class="container"> 
 
    <div class="desktop-12 columns"> 
 
     <div class="border-top"></div> 
 
    </div> 
 

 
    <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
     <div class="desktop-3 mobile-half columns"> 
 
     <div class="item first-row"> 
 
      <h3>Bird</h3> 
 
      <span class="category">Illustration</span> 
 

 
      <div class="imgwrapper"> 
 
      <img class="showtext" src="http://placehold.it/250" onmouseover="this.src='http://placehold.it/250/0ff';" onmouseout="this.src='http://placehold.it/250';" /> 
 

 
      <div>Some text to be shown on top of the image</div> 
 
      </div> 
 

 
     </div> 
 
     <!-- // .item --> 
 
     </div> 
 
     <!-- // .desktop-3 --> 
 
     <div class="clear"></div> 
 
    </a> 
 
    </div> 
 
</section>

來源

2016-10-01 08:04:07 LGSon

感謝您的回覆，我是初學者。我必須命名div嗎？因爲我有很多其他的div，如果是的話應該是img + #name和img：hover + #name？ – Phuong

@Phuong更新我的答案，並通過使用類，像這樣'.showtext：hover + div'，你只需要一個爲你的所有圖像 – LGSon

謝謝，它顯示的文字，但文字是在圖像下面，我想文字在圖像上，有沒有辦法做到這一點？ – Phuong

使用mousenter和mouseleave。

我建議將特定的選擇器類.firstImage應用於您的圖像。

$('.firstImage').on({ 
 
    mouseenter: function (evt) { 
 
    $(this).attr('src', 'http://placehold.it/350x350') 
 
    $(this).parent('div').css('color', 'red'); 
 
    }, 
 
    mouseleave: function (evt) { 
 
    $(this).attr('src', 'http://placehold.it/350x150') 
 
    $(this).parent('div').css('color', 'blue'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="works"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="desktop-12 columns"><div class="border-top"></div></div> 
 

 
\t \t \t 
 
\t \t \t \t <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>Bird</h3> 
 
\t \t \t \t \t \t \t <span class="category">Illustration</span> 
 

 
\t \t \t \t \t \t \t <img src="http://placehold.it/350x150" class="firstImage"/> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
        <div class="clear"></div> 
 
\t \t \t \t </a> 
 
\t \t \t \t </div></section>

來源

2016-10-01 08:05:32

所有你需要的只是給一個id文本「格」，並將其更新到你的CSS：

img + div { 
 
    display: none; 
 
} 
 
img:hover + #ImageText { 
 
    display: block; 
 
}

<section id="works"> 
 
    <div class="container"> 
 
    <div class="desktop-12 columns"> 
 
     <div class="border-top"></div> 
 
    </div> 
 

 

 
    <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
     <div class="desktop-3 mobile-half columns"> 
 
     <div class="item first-row"> 
 
      <h3>Bird</h3> 
 
      <span class="category">Illustration</span> 
 

 
      <img src="http://placehold.it/50" onmouseover="this.src='http://placehold.it/50/f00';" onmouseout="this.src='http://placehold.it/50';" /> 
 

 
      <div id="ImageText">Some text to be shown</div> 
 
     </div> 
 
     <!-- // .item --> 
 
     </div> 
 
     <!-- // .desktop-3 --> 
 
     <div class="clear"></div> 
 
    </a> 
 
    </div> 
 
</section>

來源

2016-10-01 08:12:05

謝謝，它顯示文本，但文本位於圖像下方，我希望文本位於圖像上，有沒有辦法做到這一點？ – Phuong

@Phuong你可以添加一個包含隱藏的圖像文本的跨度。在圖像懸停你將不得不顯示文本跨度。 –

試試這個：

$(document).ready(function() { 
 
    
 
    $(".myimg").mouseenter(function(){ 
 
     $(this).attr({src:"http://kurld.com/images/wallpapers/flower-image/flower-image-18.jpg"}); 
 
     $(".txt").show(); 
 
     
 
    }).mouseleave(function(){ 
 
     $(this).attr({src:"https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg"}); 
 
     $(".txt").hide(); 
 
     
 
    }) 
 
})

img { 
 
    width: 200px; 
 
    height: 100px; 
 
    } 
 
.txt { 
 
    display: none; 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 10px; 
 
    background-color: #fff; 
 
    } 
 
.wrapper { 
 
    position: relative; 
 
    }

<section id="works"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="desktop-12 columns"><div class="border-top"></div></div> 
 
\t \t \t \t <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>Bird</h3> 
 
\t \t \t \t \t \t \t <span class="category">Illustration</span> 
 
          <div class="wrapper"> 
 
\t \t \t \t \t \t \t <img class="myimg" src="https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg" /> 
 
          <div class="txt">Red Flower</div> 
 
          </div> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
        <div class="clear"></div> 
 
\t \t \t \t </a> 
 
\t \t \t \t </div></section> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

來源

2016-10-01 08:24:35 Ehsan

將鼠標懸停在圖像上時顯示文字

回答

相關問題