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')">

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

1 个答案: