时间戳

首页 > 解决方案 > 可点击元素上的 CSS (*[onclick]:hover)

javascript - 可点击元素上的 CSS (*[onclick]:hover)

问题描述

当它们悬停时，我想用来设置我的可点击元素（javascript 函数 onclick）的样式。到目前为止，我有这个：

*[onclick]:hover{
    background-color: red ;
    color: blue;
}

如您所见，它适用于我的大多数元素：

document.getElementById('C').onclick =  function(){alert('I am clickable too !')}
div {
    background-color: green ;
    margin : 2px
}
*[onclick]:hover{
    background-color: red ;
    color: blue;
}
<div id="A" onclick='alert("A")'>Click me ! A</div>
<div id="B" onclick='alert("B")'>Click me ! B</div>
<div id="notAclickableElement" >Don't click me :( Z</div>
<div id="C" >Click me ! C</div>
<div id="D" onclick='alert("D")'>Click me ! D</div>

但它只适用于在 Html 页面中编写 onclick 函数的元素，而不是通过 Javascript 添加的元素。有没有办法正确选择所有可点击元素？

标签： javascripthtmlcssonclick

解决方案

浏览器知道一些默认情况下可以点击的元素，比如<a>and<button>元素。如果您希望用户单击它们，通常使用这些元素是一个好习惯，因为它们几乎不需要修改。

除此之外，您可以将一个类添加到以它们为目标的元素中，因为没有可以单击的元素的选择器。

但是，向tabindex可以单击的元素添加属性是一种很好的做法，因为它可以使它们成为焦点。没有鼠标的用户（它们存在）可以使用该Tab键循环浏览可点击元素并使用Enter或来点击它们Spacebar。第一段中提到的元素已经在本机包含了这一点。对于<div>元素，您必须手动添加此行为。

下面的示例针对具有类的所有可点击元素，并:focus为焦点样式添加选择器。

document.getElementById('C').onclick = function() {
  alert('I am clickable too !')
}
div {
  background-color: green;
  margin: 2px
}

.clickable:hover {
  background-color: red;
  color: blue;
}

.clickable:focus {
  background-color: blue;
  color: red;
}
<div id="A" class="clickable" onclick='alert("A")' tabindex="0">Click me ! A</div>
<div id="B" class="clickable" onclick='alert("B")' tabindex="0">Click me ! B</div>
<div id="notAclickableElement">Don't click me :( Z</div>
<div id="C" class="clickable" tabindex="0">Click me ! C</div>
<div id="D" class="clickable" onclick='alert("D")' tabindex="0">Click me ! D</div>

推荐阅读