javascript - 使用touchmove触发悬停事件

Question

我对编码还比较陌生，我的网站遇到了一个特殊问题。我的主页上有图像，当光标移到图像上时会出现叠加文本悬停效果。它在桌面上完美运行，但在移动设备上运行不佳。我希望当用户在任何方向上滑动图像时出现悬停文本。我做了一些研究，看来我应该以某种方式使用 jQuery 和 touchmove 函数来实现这一点。但我就是想不通。我正在使用 Shopify(首次亮相的主题)来建立我的网站。任何帮助将不胜感激!

这是我的悬停事件 CSS:

//hover effect//
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 99%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
}

.container:hover .overlay {
  opacity: 0.7;
}

.text {
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: pre;
}

谢谢!!!!

Answer 1

您需要将具有所需效果的类应用于目标元素。 你可以用 Jquery 来做，但 javascript 完全有能力自己做。 像这样的东西:

Javascript:

const myTargetElement = document.getElementsByClassName('overlay')[0]; // index to be confirmed

// add hover style
myTargetElement.addEventListener('touchmove', function (e) {
    e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
myTargetElement.addEventListener('touchend', function (e) {
    e.target.classList.remove('hover'); // or whichever class name you'd like
});

CSS:

.container:hover .overlay,
.overlay.hover {
   opacity: 0.7;
}

注意:如果您想使用该代码定位页面上的所有元素 .overlay，您需要类似以下内容:

Javascript:

const myTargetElements = document.getElementsByClassName('overlay');

// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {

    // add hover style
    element.addEventListener('touchmove', function (e) {
        e.target.classList.add('hover'); // or whichever class name you'd like
    });

    // remove hover style on end
    element.addEventListener('touchend', function (e) {
        e.target.classList.remove('hover'); // or whichever class name you'd like
    });
});