Img + некоторый скрытый текст, после наведения на него img должен стать больше, а текст должен стать видимым - PullRequest
Новая
       17

Img + некоторый скрытый текст, после наведения на него img должен стать больше, а текст должен стать видимым

0 голосов
/ 07 февраля 2020

Я пробовал с css и javascript, это вроде работает, но не очень хорошо. Как только текст, который находится прямо перед img, становится видимым, изображение больше не зависает и остается маленьким ... и начинает мигать.

У вас есть идея, что Я мог сделать? 

displayDotTextonHover =  function displayDotTextonHover() {
    const purpleDot = document.querySelector(".bucketList img");

 purpleDot.addEventListener("mouseover", function (){
        document.querySelector(".bucketList img").style.transform= "scale(1.5)";
        document.getElementById("myBucketList").style.visibility="visible";
    });

   purpleDot.addEventListener("mouseout", function (){
        document.querySelector(".bucketList img").style.transform= "scale(1)";
        document.getElementById("myBucketList").style.visibility="hidden";
    });
};
/*
.menu img:hover{
    cursor: pointer;
    transform: scale(1.5);
}

/*.menu img:hover~#myBucketList{
    visibility: visible;
    cursor: pointer;
}*/
<div class = "bucketList">
  <img src="../images/Footer/blueDot.png"/>                  
  <p id="myBucketList">Bucket</br>List</p>
</div>

1 Ответ

0 голосов
/ 07 февраля 2020

Вы можете сделать это без javascript.

ОБНОВЛЕНИЕ комментария

, если текст сверху изображения

сделайте так, чтобы ваш контейнер изображений соответствовал содержанию, например, с помощью display: inline-block;, и внесите изменения не при наведении изображения, а при наведении контейнера.

Посмотрите фрагмент. 

.bucketList {
  position: relative;
  display: inline-block;
}

.bucketList:hover .image {
  cursor: pointer;
  transform: scale(1.5) translate(10%, 0);
}

.bucketList * {
  position: absolute;
}

.image {
  width: 200px;
  height: 100px;
  top: 0;
  left: 0;
}

#myBucketList {
  visibility: hidden;
  top: 30px;
  left: 70px;
  white-space: nowrap;
  background-color: aqua;
}

.bucketList:hover #myBucketList {
  visibility: visible;
  cursor: pointer;
  line-height: 1.5;
}
<div class="bucketList">
  <img src="https://media.istockphoto.com/vectors/business-stamp-illustration-sample-vector-id932071254" class="image" />
  <p id="myBucketList">Bucket List</p>
</div>
...