【问题标题】:link css active state with a js event将 css 活动状态与 js 事件联系起来
【发布时间】:2023-03-24 02:02:02
【问题描述】:
.el:active{
    background:red;
}

有没有办法把上面的active状态和一个js事件联系起来,smt是这样的:

$('.el').on('active', function(){  
    img.show();
});

我的意图是在按下el 时保持图像可见,并在释放el 时隐藏图像。

【问题讨论】:

标签: javascript jquery css


【解决方案1】:

您可以使用onmouseuponmousedown 事件。请参见下面的示例。

function mouseDown() { 
  document.getElementById("imageId").style.display = "block";
}

function mouseUp() {
  document.getElementById("imageId").style.display = "none";
}
img{
  display:none;
}
<button onmousedown="mouseDown()" onmouseup="mouseUp()">Click me</button>
<img src="data:image/png;base64,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" id="imageId" alt="">

【讨论】:

    【解决方案2】:

    使用keydownmousedown 事件的组合来启动它,并使用keyupmouseup 来结束它。

    【讨论】:

      猜你喜欢
      • 2019-06-20
      • 2011-12-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-05-30
      • 1970-01-01
      • 1970-01-01
      • 2015-02-25
      相关资源
      最近更新 更多