logo标签列表

CSS悬停效果在Ajax内容和移动设备上的应用

javascriptjquerycssajax
4
我已经构建了一个问答游戏。每个问题都有两个答案。当访问者回答一个问题后，使用Ajax加载下一个问题。在加载问题之前，访问者必须先点击开始按钮，这样问题的HTML就不会包含在初始页面加载中。
问题是，当一个问题被回答后，下一个问题加载时，上一个问题的悬停效果仍然有效。
例如：我用“B”回答问题1 > 加载问题2 > 按钮B的悬停效果在问题2上仍然有效。
我已经包含了一张图片来使这更清晰。
我只在移动设备（iPhone、iPad 等）上遇到此问题，但在我的笔记本电脑上没有遇到。
我已经研究了是否可以更改悬停伪类，但显然这不可能使用 JavaScript。
我认为问题在于每个问题的 HTML 是相同的，因此当第一个问题被回答时，CSS 类的悬停状态仍然保持活动状态。
我无法提供 jsfiddle，因为问题是作为 Drupal 中的内容类型输入的，我无法在 fiddle 中包含整个 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 让我们看看是否能够重现这个错误？ - Luke
1
这是我认为在移动设备上使用:hover时的常见问题。看看这个链接，它可能会对你有所帮助 - https://dev59.com/O3E95IYBdhLWcg3wKqyq - Andy Holmes
这篇文章可能对你有用：http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/ - Andy Holmes
2个回答
1
当我在使用移动设备时，我添加了以下内容：

When I was working with mobile devices I added

ontouchstart=""

to the body tag like so:

<body ontouchstart="">

这使得悬停伪类选择器对我来说不再那么尴尬，或许值得一试。
+1 虽然这并没有解决我的初始问题，但总的来说确实有所帮助。谢谢。 - Jrn
1
我已经解决了这个问题。嗯，这并不是真正的修复，因为悬停状态仍然有效，但我在触摸设备上使用默认颜色覆盖了颜色，就像这样：
$('.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状态仍然是活动的，只是不再可见。

目前我并没有看到更好的解决方法。如果有人知道，请告诉我。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接