javascript - 如何将鼠标悬停事件更改为点击事件？

Question

这就是我想要的。有很多词，例如 test1、test2、test3、...，每个词都与一个或多个示例相关联。我想并排显示单词，并在“单击”相关单词时显示示例 起初，我像下面这样写(鼠标悬停事件)，但我意识到它在移动环境中不起作用。所以我需要改变我的计划。我希望在用户单击单词时发生操作。

https://jsfiddle.net/kyubyong/umxf19vo/

HTML

<a>test1</a>
<div class="divs">
    <li>This is the example of test1</li>
</div>

<a>test2</a>
<div class="divs">
    <li>This is the example of test3</li>
</div>

<a>test3></a>
<div class="divs">
    <li>This is the example of test3</li>
</div>

CSS

a:hover
{
    background-color: lightgray;
}

.divs 
{
  display: none;
}

a:hover + .divs 
{
    display: block;
    position: absolute;
    background-color: lightgray;
    width: 100%;
    padding: 5px;
}

Answer 1

看起来您正在处理的事件是 click 事件。

我认为这不能像您的 jsfiddle 示例中那样仅使用 css 来完成，但它肯定可以使用 javascript 来完成。

这是使用 jQuery 处理它的一种方法:

$('a').click(function() {
 $('a').removeClass('active');
 $(this).toggleClass('active');
});

请参阅 https://jsfiddle.net/fznL3c9L/ 上的工作示例