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
    });
});

Answer 2

因此Moustachiste的代码有效！它有一些语法错误，但我能够快速解决它们。这是最终版本：

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
    });
    });

将代码粘贴到theme.js中，并相应地调整变量名称。应该为每个人工作！

为这个家伙欢呼！

使用touchmove触发悬停事件

2 个答案: