Javascript 模式窗口打开时，outouchend不删除悬停

我有一个带有悬停的按钮，可以改变不透明度。这是一个将信息共享到facebook的社交按钮

这很简单

这里是css

.social_vk, .social_fb {        
    height: 38px;
    object-fit: contain;
    cursor : pointer;
    opacity: 1;
}

.social_vk:hover, .social_fb:hover {
    opacity: 0.7;
}

这里是html

<div class="social">
<img src="/images/vk.svg" class="social_share social_vk" data-    type="vk" onmtouchstart="this.style.opacity = '0.8'" ontouchend ="this.style.opacity = '1'">
<img src="/images/facebook.svg" class="social_share social_fb" data-type="fb" ontouchstart="this.style.opacity = '0.8'" ontouchend="this.style.opacity = '1'">

所以。问题是点击这个按钮会打开模式窗口（facebook），按钮的不透明度保持在0.8

---

我不确定，但我被困在这里了

通过

style

属性更改样式可能会产生一些意外的副作用，因为它们是内联的。因此，只需从中添加/删除另一个类，您就可以更好地使用它

主要变化如下：

ontouchstart=“this.classList.add（'hover'）”ontouchend=“this.classList.remove（'hover'）”

请注意：

.social\u vk、.social\u fb{
高度：38px；
对象匹配：包含；
光标：指针；
不透明度：1；
}
.social_vk:hover，.social_fb:hover，
.social_vk.hover、.social_fb.hover{
不透明度：0.7；
}