Question

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

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

例如：我回答问题1“B”＆gt;问题2加载＆gt;问题2的按钮B上的悬停效果是有效的

我已经包含了一张图片，以便更加清晰。

enter image description here

我只在移动设备（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;
}

如上所述，这只发生在移动设备上。我一直在为此抨击我好几个小时，我对如何解决这个问题一无所知。

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

Answer 1

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

ontouchstart=""

到body标签，如下：

<body ontouchstart="">

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

Answer 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;
}

从技术上讲：悬停状态仍处于活动状态，不再可见。

目前我还没有找到更好的解决方法。如果有人，请告诉我。

CSS悬停对ajax内容和移动设备的影响

2 个答案: