当前位置: 首页 > 面试题库 >

将:hover更改为触摸/单击移动设备

洪捷
2023-03-14
问题内容

我环顾四周,但找不到我想要的东西。

我的页面上目前有一个CSS动画,它是由:hover触发的。当使用媒体查询将页面调整为宽度超过700px时,我希望将其更改为“单击”或“触摸”。

如您所见,:hover不能在移动设备上工作,但我仍然想确保单击即可,而不是将其悬停。

如果可能的话,我宁愿使用CSS,但也对JQuery满意。

我觉得这很容易做到,但我只是缺少一些非常明显的东西!任何帮助,将不胜感激。

这是CSS动画:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transithtml" target="_blank">ion: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

问题答案:

如果将:active选择器与:hover结合使用,只要在:hover选择器之后调用:active选择器,就可以根据w3schools实现此目的。

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

您必须在移动环境中测试 FIDDLE。我暂时不能。 更正 -我刚刚在手机上测试过,效果很好



 类似资料:
  • 问题内容: 好的,我想做的是当用户单击列表项时将div向下滑动。 Selectric),它将选择框转换为无序列表。因此,当用户单击源输出为列表项的a时,我希望div向下滑动。 在移动浏览器(iOS7)上,选择框UI与标准选择框UI相同。 关于移动设备onClick的最佳做法是什么? 基本的jQuery: 谢谢。 问题答案: 最好将事件与jQuery方法结合使用: 而且我不明白为什么要使用方法,因为

  • 问题内容: 在页面加载时,我有一个调用服务的控制器,然后将返回的数据绑定到某些$ scope.objects: 在我的HTML中,我尝试通过以下方式绑定$ scope.OrderHistory: 在笔记本电脑/台式机上观看时很好,但在平板电脑和移动设备(例如iPhone / iPad)上无法使用 问题答案: 尝试添加ngTouch。从文档: 设计用于触摸屏设备的默认功能的更强大替代品。大多数移动浏

  • 如果你哭喊着:“移动设备怎么样?台式机和笔记本电脑已经成为历史!”,本节就是写给你的。随着上网设备从数量庞大的台式机开始往移动设备转移,日益明显的是,未来的Web,包括画布,大部分将会驻留在移动设备上。 运行在台式机和笔记本电脑上的应用,通过检测mousedown, mouseup, mouseover, mouseout, 和 mousemove触发的鼠标事件,来跟用户进行交互,运行在移动设备上

  • 我正在用xaml编写一个datepicker样式。日历弹出窗口由datepicker的textbox旁边的calendar按钮切换。我希望当单击/触摸textbox时日历也能切换 向datepicker样式添加事件触发器时,日历在触摸textbox时切换,但仅在鼠标单击时显示并保持打开;单击/触摸datepicker日历按钮时,日历立即打开和关闭。 我的问题: 有没有比使用事件触发器更好的方法来实

  • 我在屏幕上有一个玩家box 2d对象,应该由两个按钮控制,一个左,一个右。当你按下右按钮时,玩家应该向右移动,但是当你按下左按钮时,玩家应该立即停止向右移动,向左移动。反之亦然。我试着这样做向右移动,b2Vec2脉冲(4,0);身体- 这是向左移动的b2Vec2脉冲(4,0);身体- 这是可行的,但当我先按右键再按左键时,玩家不会立即向左移动,而是继续向右移动一段时间,然后向左移动。我如何确保这不

  • 问题内容: 在iPhone / iPad / Android等触摸设备上,可能很难用手指按一下小按钮。据我所知,没有跨浏览器的方法可以通过CSS媒体查询来检测触摸设备。因此,我检查浏览器是否支持Javascript触摸事件。 到目前为止,其他浏览器还不支持它们,但是开发人员频道上的最新Google Chrome浏览器 启用了触摸事件(即使对于非触摸设备也是如此)。而且我怀疑其他浏览器制造商也会效仿