通过jquery .trigger()方法将div带到:active状态

Question

我已经为div分配了一个:activeCSS伪类,使其对点击和保持具有"响应性".

   .quarter:active{
      opacity: 0.5;
   }

我想要实现的是使用JQuery模拟长按.在.trigger("click")似乎没有这样的伎俩,因为没有明显的变色.我也试过了.trigger("focus"),.trigger("mousedown")但似乎我搞砸了.

    <div id="1" class="quarter green" ></div>
    <div id="2" class="quarter red" ></div>
    <div id="3" class="quarter yellow" ></div>
    <div id="4" class="quarter blue" ></div>

有没有办法实现这一点,还是我必须使用一种toggleClass方法？

编辑:感谢nashcheez回答我使用.trigger("focus")后面的a 解决了我的问题setTimeout(...{ .blur() }).谢谢大家的快速回复.

Answer 1

你可以在没有jQuery和纯粹的情况下做到这一点css。你可以只focus在 css 中提供一个状态，tabindex在 html 中提供一个属性。

参考代码：

.quarter {
  height: 40px;
  width: 40px;
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
}

.quarter:focus {
  opacity: 0.5;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

<div id="1" class="quarter green" tabindex="1"></div>
<div id="2" class="quarter red" tabindex="1"></div>
<div id="3" class="quarter yellow" tabindex="1"></div>
<div id="4" class="quarter blue" tabindex="1"></div>

通过这种方式，您可以opacity在单击 时保持不变div，并在单击外部任意位置时返回到正常值。

在此处阅读有关该tabindex属性的更多信息。