Question

我想做的是：我想要一张没有任何图像的图像。但是，当用户将鼠标移到上方时，我要显示一个按钮（我已经知道了）。但是我的按钮有问题，因为当我将鼠标悬停在按钮上时，按钮开始闪烁，我不知道该如何停止。

function showBTN() {
    var x = document.getElementById('butt');
    x.style.display = 'block';
}

function removeBTN() {
    var y = document.getElementById('butt');
    y.style.display = 'none';
}

.container {
    position: relative;
}

.container img {
    width: 100%;
    height: auto;
}

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    text-align: center;
  }

<h6 class="date">October 13, 2017</h6>

<h3>Contact Mgmt. - C</h3>

<div class="container p-0 m-0">

 <img
     src="https://picsum.photos/254/384?grayscale"
     style="border-radius: 10px;"
     onmouseover="showBTN()"
     onmouseout="removeBTN()"
 />

  <a
    id="butt"
    style="display: none;"
    href="https://github.com"
    class="btn btn-outline-success">
   Github code
  </a>

</div>

这是我用来显示按钮的Javascript 并在用户将鼠标移至上方或移出鼠标时消失。此功能称为a标签。

这是负责我正在使用的CSS的代码每次将鼠标悬停在按钮上时，按钮都会开始闪烁，我试图将其停止并使其正常工作。

Answer 1

为什么不只使用CSS呢？

.show-n-hide .btn-show-n-hide {
  visibility: hidden;
}

.show-n-hide:hover .btn-show-n-hide {
  visibility: visible;
}

<div class="show-n-hide">
  <span>Let's pretent that I'm the image. Hover over me.</span>

  <a id="butt" href="https://github.com" class="btn btn-outline-success btn-show-n-hide"> Github code
</a>
</div>

Answer 2

它闪烁是因为当您将鼠标悬停在按钮上时，img的{{1}}会触发。将事件放在mouseout和按钮容器上可以解决该问题：

img

function showBTN() {
    var x = document.getElementById('butt');
    x.style.display = 'block';
}

function removeBTN() {
    var y = document.getElementById('butt');
    y.style.display = 'none';
}

.container {
    position: relative;
}

.container img {
    width: 100%;
    height: auto;
}

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    text-align: center;
  }

为什么鼠标悬停时btn闪烁？

2 个答案: