Заменить изображение текстом, используя onmouseover jQuery - PullRequest
Новая
       74

Заменить изображение текстом, используя onmouseover jQuery

0 голосов
/ 10 февраля 2019

Я хочу заменить изображение текстом из метки через jQuery (onmouseover и onmouseout).Кто-нибудь может привести пример?

1 Ответ

0 голосов
/ 10 февраля 2019

Перейти по этой ссылке: https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_slidebottom

Удалите из стиля следующее: 

.container:hover .overlay {
  height: 100%;
}

добавьте этот скрипт в заголовок после конечного тега стиля:

Это полный ответ: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){
  $(".container").mouseover(function(){
   var hiddenText = $("#labelid").text();
$(".text").text(hiddenText);
$(".overlay").css("height", "100%");
 });
  $(".container").mouseout(function(){
$(".overlay").css("height", "0%");
 });
});
</script>

А затем html / css: 

<label id="labelid" style="display: none;"> myText
 </label>
<div class="container">
 <img src="img_avatar.png" alt="Avatar" class="image">
 <div class="overlay">
<div class="text">

</div>
</div>
</div>
...