javascript - 模态窗口打开时 outouchend 不删除悬停

Question

我有一个悬停按钮可以改变不透明度。它是将信息分享到 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

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

Answer 1

通过 styles 属性更改样式可能会产生一些意想不到的副作用，因为它们是内联的。因此，只需从中添加/删除另一个类，您将有更好的时间使用它。

主要变化如下:ontouchstart="this.classList.add('hover')"ontouchend="this.classList.remove('hover')"。

请注意:

The touchstart event will only work on devices with a touch screen.

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

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

<div class="social">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" class="social_share social_vk" data-type="vk" ontouchstart="this.classList.add('hover')" ontouchend ="this.classList.remove('hover')">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkiPlfDwADmwHcaV65UQAAAABJRU5ErkJggg==" class="social_share social_fb" data-type="fb" ontouchstart="this.classList.add('hover')" ontouchend="this.classList.remove('hover')">