gpt4 book ai didi

javascript - ajax 内容和移动设备上的 CSS 悬停效果

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:18:09 25 4
gpt4 key购买 nike

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

问题是当一个问题被回答时,上一个问题的悬停效果在加载下一个问题时仍然有效。

例如:我用“B”回答问题 1 > 问题 2 已加载 > 悬停效果在问题 2 的按钮 B 上处于事件状态

我附上了一张图片以使其更清楚。

enter image description here

我只在移动设备(iPhone、iPad 等)上有这个,但在我的笔记本电脑上没有。

如果我可以更改 hover 伪类,我已经做了一些研究,但显然使用 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;
}

如上所述,这只发生在移动设备上。几个小时以来,我一直在为此苦苦思索,但我对如何解决这个问题一无所知。

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

最佳答案

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

ontouchstart=""

像这样添加到 body 标签中:

<body ontouchstart="">

这让悬停伪选择器对我来说不那么笨拙,值得一试。

关于javascript - ajax 内容和移动设备上的 CSS 悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20035540/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com