Question

当此代码在平板电脑/手机上运行时，用户必须点击两次才能访问链接的网址。相反，有没有办法在不使用'@media屏幕和（max-width：XXXpx）'的情况下在触摸屏设备上查看时删除悬停效果？ - 无论桌面浏览器调整到何种宽度，我都希望将悬停效果保留在桌面网站上。

非常感谢提前！

a:link,
a:visited,
a:hover,
a:active {
  color: white;
  text-decoration: none;
}
#container {
  position: absolute;
  display: table;
  width: 200px;
}
#one {
  position: relative;
  display: table-cell;
  background-color: orange;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  width: 200px;
}
#one:hover {
  background-color: green;
}
#one:hover > #hello {
  display: none;
}
#one:hover > #world {
  font-size: 1.2em;
  display: block;
}
#hello {
  font-size: 1.2em;
  display: block;
}
#world {
  display: none;
}

<div id="container">

  <a id="one" href="http://www.google.com">
    <p id="hello">Hello</p>
    <p id="world">World</p>
  </a>

</div>

Answer 1

您可以在root / html元素上添加一个类，即：

var root =  document.querySelector(":root");
 if ( 'ontouchstart' in window ) {root.classList.add("touch")}

然后使用negation CSS pseudo-class

:root:not(.touch) #one:hover {
  background-color: green;
}
:root:not(.touch) #one:hover > #hello {
  display: none;
}
:root:not(.touch) #one:hover > #world {
  font-size: 1.2em;
  display: block;
}

<强>替代

 var root =  document.querySelector(":root");
 'ontouchstart' in window ? root.classList.add("touch") : root.classList.add("no-touch")

然后

.no-touch #one:hover {
  background-color: green;
}
.no-touch #one:hover > #hello {
  display: none;
}
.no-touch #one:hover > #world {
  font-size: 1.2em;
  display: block;
}

触摸

.touch #one{
  /*something else*/  
}

如何在使用触摸屏时删除'：hover'？

1 个答案: