Ajax内容和移动设备上的CSS悬停效果
我已经建立了一个测验。 每个问题有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;
}
如上所述，这只发生在移动设备上。 我一直在这里抨击我的头几个小时，我对如何解决这个问题毫无头绪。
如果任何人都可以帮助我，或者指引我朝着正确的方向发展，那将不胜感激。
当我使用移动设备时，我补充说
ontouchstart=""
像这样的身体标签：
<body ontouchstart="">
这使得悬停伪选择器对我来说不会很笨拙，它可能值得一试。
我能够解决这个问题。 那么，..它不是一个修复，因为悬停状态仍然有效，但我用触摸设备上的默认颜色覆盖颜色，如下所示：
$('.quiz_st_form,').bind('touchstart', function(){
$('body').addClass('touchdevice');
});
因此，当某人在移动设备上的测验开始按钮上点击时，我的身体会获得课程touchdevice并使用CSS“移除”悬停，如下所示：
body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
background: #ccc;
}
从技术上来说：悬停状态仍然活跃，它只是不再可见。
目前我没有看到更好的解决方法。 如果有人这样做，请让我知道。
链接地址: http://www.djcxy.com/p/49661.html