I have developed a quiz with 2 answer options for each question. To prevent the questions from loading initially, visitors must click a start button, triggering the questions to load via Ajax.
The issue I am facing is that when a question is answered, the hover effect from the previous question remains active on the next question that is loaded.
For instance: If I answer question 1 with "B", then question 2 is loaded and the hover effect is still active on button B for question 2.
To illustrate this problem more clearly, I have attached an image.
This issue only occurs on mobile devices (iPhone, iPad, etc.) and not on my laptop.
I have tried to modify the hover pseudo class using JavaScript, but it seems that this is not achievable.
I suspect that the repetitive HTML structure for each question is causing the hover state to persist for the CSS class when transitioning from one question to another.
Unfortunately, I cannot provide a JSFiddle as the questions are entered as a content type in Drupal, making it impossible to include the entire Drupal setup in a fiddle. However, I have included the HTML and CSS for reference.
<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;
}
Hover
input.form-submit.quiz_st_content_answer_button:hover {
background: #ba043f;
}
This issue has been causing me frustration for hours, and I am at a loss on how to fix it.
If anyone can offer assistance or guidance on how to address this issue, I would greatly appreciate it.