HTML – 我的工具提示可以适用于触摸屏吗？

概述我已经为我的广告制作了一些工具提示,这些工具提示了很多东西 – 他们只用简单的鼠标就可以显示出来.显然他们不适用于触摸界面. 我只限于理想的纯HTML5和CSS3,绝对没有jquery,理想情况下没有javascript.我已经尝试更改(或者更确切地说)：激活到：悬停类,但触摸屏上什么也没发生. 当前的HTML和CSS是 .tiptext { cursor: help; color: bl 我已经为我的广告制作了一些工具提示,这些工具提示了很多东西 – 他们只用简单的鼠标就可以显示出来.显然他们不适用于触摸界面.

我只限于理想的纯HTML5和CSS3,绝对没有jquery,理想情况下没有JavaScript.我已经尝试更改(或者更确切地说)：激活到：悬停类,但触摸屏上什么也没发生.

当前的HTML和CSS是

.tiptext {  cursor: help;  color: black;  Font-family: 'ProximaNova','Helvetica Neue',Helvetica,Arial,'LucIDa Grande',sans-serif;  Font-weight: 600 !important;  border-bottom: 1px solID #ebebeb;  Box-shadow: inset 0 -5px 0 #ebebeb;  -webkit-Transition: background .15s cubic-bezIEr(.33,.66,1);  Transition: background .15s cubic-bezIEr(.33,1);  text-decoration: none;  Font-size: 14px;  line-height: 172%;  -webkit-animation-name: link-helpoff;  -webkit-animation-duration: 1s;  animation-name: link-helpoff;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;  Transition-delay: 0.4s;}.tiptext::after {  content: "";  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  pointer-events: none;  color: transparent;  background-color: transparent;  Transition: background-color 0.5s linear;}.tiptext:hover::after {  background-color: rgba(255,255,0.6);}.description {  border: 1px solID #e3e3e3;  background: white;  wIDth: auto;  max-wIDth: 275px;  height: auto;  padding: 10px;  Font-family: 'ProximaNova',sans-serif;  Font-weight: 300;  color: rgb(39,44,45);  Font-size: 13px;  z-index: 500;  position: absolute;  margin-left: 50px;  margin-top: 20px;  cursor: default;  display: inline-block;}.tiptext > .description {  visibility: hIDden;  opacity: 0;  Transition: visibility 0s linear 0.4s,opacity 0.4s linear;}.tiptext:hover > .description {  visibility: visible;  opacity: 1;  Transition-delay: 0s;  -webkit-Transition: opacity 0.2s ease-in;  -moz-Transition: opacity 0.2s ease-in;  -ms-Transition: opacity 0.2s ease-in;  -o-Transition: opacity 0.2s ease-in;  Transition: opacity 0.2s ease-in;}.tiptext:hover {  color: black;  -webkit-animation-name: link-help;  -webkit-animation-duration: 0.6s;  animation-name: link-help;  animation-duration: 0.6s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;  Transition-delay: 0s;}

<span >  <span  >You can read more about the topic in this pop up Box</span>  Mouse over me to learn more.</span>

在CSS中有一些动画和技巧(我没有包含链接帮助动画,但你得到了这个想法)当你将鼠标放在它上面时,基本上盒子会淡入和淡出 – 而且还有一个全屏白色背景如果在触摸屏设备上没有发生这种情况,那么它就会有点不透明,从而将鼠标悬浮在盒子上 – 这没什么大不了的.

我怀疑可能需要进行大量更改才能在触摸屏设备上按下相同的d出框.

解决方法 是的,有办法.

首先：将属性“ontouchstart”添加到按钮.
第二步：为：active,：focus和：hover添加样式.

我在iOS上测试了这个并且它可以工作. (没有尝试使用AndroID).

div {  display: none;}button {  wIDth: 200px;  height: 50px;  border: 1px solID red;  display: inline-block;  }button:active,button:focus,button: hover {  background-color: blue;}button:active + div,button:focus + div,button:hover + div {  display: block;}

<p>Hello</p><button ontouchstart>Activate</button><div>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Impedit,ipsa,officIIS! Est voluptatibus explicabo sed atque provIDent vel deleniti nulla quis,ipsa quas dolorum,dolorem cum possimus accusamus impedit nostrum!</div><p>Goodbye</p>

总结

以上是内存溢出为你收集整理的HTML – 我的工具提示可以适用于触摸屏吗？全部内容，希望文章能够帮你解决HTML – 我的工具提示可以适用于触摸屏吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。