使用触摸屏时如何删除“：悬停”？答案

【问题标题】：How to remove ':hover' when using a touchscreen?使用触摸屏时如何删除“：悬停”？
【发布时间】：2015-02-25 19:55:43
【问题描述】：

当此代码在平板电脑/移动设备上运行时，用户必须点按两次才能访问链接的 URL。相反，有没有办法在不使用“@media screen and (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>

【问题讨论】：

标签： html ios css mobile tablet

【解决方案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*/  
}

【讨论】：