Img + 一些隐藏的文字，悬停在上面后，img 应该变大，文字应该可见

Question

我试过 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>

Answer 1

你可以不用 javascript。

更新评论

if the text is on top of the Image

使您的图像容器适合内容，例如使用 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>

Img + 一些隐藏的文字，悬停在上面后，img 应该变大，文字应该可见

Img + some hidden Text, after hovering on it, img should turn bigger and text should turn visible

html

javascript

css

image

hover