Geek Answers Handbook

The impact of CSS hovering on ajax content and mobile devices

I created a quiz. Each question has 2 answers. When a visitor answers a question, the next one loads using Ajax. Before uploading questions, the visitor must first click the start button, so the HTML for questions is not included in the loading of the start page.

The problem is when the question is asked, the effect of freezing on the previous question is still active when the next one loads.

For example: I ask question 1 with question "B"> question 2> the freezing effect is active on button B for question 2

I have included an image to make this clearer.

enter image description here

I only have it on mobile devices (iPhone, iPad, ...), but not on my laptop.

, - hover, , -, 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;
}

, . , , .

- , .

+4
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 , .

. - , .

+1

,

ontouchstart=""

body, :

<body ontouchstart="">

, - hover , , .

+1

More articles:


All Articles