在我们平时在写网页的时候,经常用到鼠标移入hover来修改样式等,但移动端和PC端都公用一个页面。移动端是默认会有手指触摸来触发hover样式的,有时我们PC端设置好hover样式后,移动端的hover样式会影响移动端的效果,此时我们就需要保留PC端的hover样式,同时禁止移动端的hover样式。这个时候我们就可以用到@media (any-hover:hover){}来实现这个需求了。
以下是demo:
@media (any-hover: hover) {
.business .business_tab .business_title:hover {
color: #2271dc;
cursor: pointer;
}
.business .business_tab .business_title:hover::after {
display: block;
}
}
我们只需要把PC端写的hover样式写进@media (any-hover: hover){}里面就可以实现PC端触发hover样式,移动端禁止hover样式。