Fatal编程技术网
  • javascript/
  • Javascript ajax内容和移动设备上的CSS悬停效果

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

javascript jquery css ajax

Javascript ajax内容和移动设备上的CSS悬停效果,javascript,jquery,css,ajax,Javascript,Jquery,Css,Ajax,我做了一个测验。每个问题有两个答案。当访问者回答一个问题时，将使用Ajax加载下一个问题。在加载问题之前，访问者必须先单击开始按钮，因此问题的HTML不包括在初始页面加载中 问题是，当一个问题被解决时，上一个问题的悬停效果在下一个问题被加载时仍然处于活动状态 例如：我在问题1中添加了“B”>问题2已加载>问题2的按钮B上的悬停效果处于活动状态 我已经包括了一个图像，以使这更清楚 我只在移动设备（iPhone、iPad等）上有，但在笔记本电脑上没有 如果我可以修改hover伪类，我已经做了一些研

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

问题是，当一个问题被解决时，上一个问题的悬停效果在下一个问题被加载时仍然处于活动状态

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

我已经包括了一个图像，以使这更清楚

我只在移动设备（iPhone、iPad等）上有，但在笔记本电脑上没有

如果我可以修改hover伪类，我已经做了一些研究，但显然这不可能使用javascript

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

我不能提供JSFIDLE，因为问题是作为内容类型输入到Drupal中的，我不能将整个Drupal包含在一个FIDLE中。但这里是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>
盘旋

如上所述，这只发生在移动设备上。几个小时以来，我一直在为这个问题头疼，我不知道如何解决这个问题

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

当我使用移动设备时，我补充道

ontouchstart=""
对body标记执行以下操作：

<body ontouchstart="">
这使得悬停伪选择器对我来说没有那么笨拙，它可能值得一试。

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

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

body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
  background: #ccc;
}
因此，当有人“点击”移动设备上的“测验开始”按钮时，我的身体会得到类
touchdevice
，我会用CSS“移除”悬停，如下所示：

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

body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
  background: #ccc;
}
从技术上讲：悬停状态仍然处于活动状态，只是不再可见

我现在真的没有更好的办法来解决这个问题。如果有人这样做，请让我知道。

您能提供一个JSFIDLE给我们看看我们是否可以重新创建错误吗？这是一个常见的问题：我相信在移动设备上悬停。看看这个，它可能会帮助你-这也可能有用+1所有虽然这并没有解决我最初的问题，但总的来说它确实有帮助。谢谢