ajax 内容和移动设备上的 CSS 悬停效果答案

【问题标题】：CSS hover effect on ajax content and mobile devicesajax 内容和移动设备上的 CSS 悬停效果
【发布时间】：2013-11-30 21:07:42
【问题描述】：

我已经建立了一个测验。每个问题有 2 个答案。当访问者回答一个问题时，使用 Ajax 加载下一个问题。在加载问题之前，访问者必须先单击开始按钮，因此问题的 HTML 不包含在初始页面加载中。

问题是当一个问题被回答时，上一个问题的悬停效果在下一个问题加载时仍然有效。

例如：我用“B”回答问题 1 > 问题 2 已加载 > 问题 2 的按钮 B 上的悬停效果处于活动状态

我添加了一张图片以使这一点更清楚。

我只在移动设备（iPhone、iPad 等）上拥有此功能，而在我的笔记本电脑上却没有。

如果我可以更改悬停伪类，我已经进行了一些研究，但显然使用 javascript 是不可能的。

我认为问题在于每个问题的 HTML 都是相同的，因此当第一个问题被回答时，悬停状态对于 css 类保持活动状态。

我无法提供 jsfiddle，因为问题是作为 Drupal 中的内容类型输入的，并且我无法将整个 Drupal 包含在小提琴中。但这里是 HTML 和 CSS。

<div class="quiz_st_content form-wrapper" id="ajax_form_multistep_form_content">
  <div class="quiz_st_content_answer form-wrapper" id="edit-a--2">
    <div class="quiz_st_content_answer_info_wrapper">Option A</div>
    <div class="quiz_st_content_answer_button_wrapper">
      <input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-a-2" name="answer_a_2">
    </div>
  </div>
  <div class="quiz_st_content_answer form-wrapper" id="edit-b--2">
    <div class="quiz_st_content_answer_info_wrapper">Option B</div>
    <div class="quiz_st_content_answer_button_wrapper">
      <input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-b-2" name="answer_b_2">
    </div>
  </div>
</div>

CSS

input.form-submit.quiz_st_content_answer_button {
  margin: 0;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  height: 30px;
  width: 30px;
  padding: 20px;
  background: #ccc;
}

悬停

input.form-submit.quiz_st_content_answer_button:hover {
  background: #ba043f;
}

如上所述，这只发生在移动设备上。我已经为此苦恼了好几个小时，但我不知道如何解决这个问题。

如果有人可以帮助我，或者指出正确的方向，我将不胜感激。

【问题讨论】：

你能给我们提供一个 jsfiddle 看看我们是否可以重新创建错误？
我相信这是 :hover 在移动设备上的常见问题。看看这个，它可能对你有帮助 -stackoverflow.com/questions/2427447/…
labs.ft.com/2011/08/… 这也可能有用

标签： javascript jquery css ajax

【解决方案1】：

当我使用移动设备时，我添加了

ontouchstart=""

到body标签如下：

<body ontouchstart="">

这使得悬停伪选择器对我来说不会那么笨拙，可能值得一试。

【讨论】：

+1 虽然这并没有解决我最初的问题，但总的来说确实有帮助。谢谢

【解决方案2】：

我能够解决这个问题。嗯，..它不是真正的修复，因为悬停状态仍然处于活动状态，但我用触摸设备上的默认颜色覆盖了颜色，如下所示：

$('.quiz_st_form,').bind('touchstart', function(){
  $('body').addClass('touchdevice');
});

因此，当有人“点击”移动设备上的测验开始按钮时，我的身体会获得 touchdevice 类，然后我会使用 CSS“移除”悬停，如下所示：

body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
  background: #ccc;
}

从技术上讲，:hover 状态仍然处于活动状态，只是不再可见。

目前我真的没有找到更好的方法来解决这个问题。如果有人这样做，请告诉我。

【讨论】：