[英]Css on clickable element (*[onclick]:hover)
I want to use to style my clickable element (javascript function onclick), when they hovered.当它们悬停时,我想使用样式我的可点击元素(javascript 函数 onclick)。 So far I have this :到目前为止,我有这个:
*[onclick]:hover{
background-color: red ;
color: blue;
}
It works fine for most of my elements as you can see :正如您所看到的,它适用于我的大多数元素:
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>
But it only work for element where the onclick function is written in the Html page, and not added via Javascript.但它仅适用于在 Html 页面中编写 onclick 函数的元素,而不是通过 Javascript 添加。 Is there a way to properly select all clickable elements ?有没有办法正确选择所有可点击元素?
The browser know a handful of elements that can be clicked by default, like the <a>
and <button>
elements.浏览器知道一些默认情况下可以单击的元素,例如<a>
和<button>
元素。 It is usually a good practice to use these elements if you want the user the click them, as they require little work to modify.如果您希望用户单击它们,那么使用这些元素通常是一个很好的做法,因为它们几乎不需要修改。
Other than that you could just add a class to the elements which to target them with as there is not a selector for an element that can be clicked.除此之外,您可以只向元素添加一个类来定位它们,因为没有可以单击的元素的选择器。
However, it is a good practice to add a tabindex
attribute to the elements that can be clicked as it makes them focusable.但是,向可单击的元素添加tabindex
属性是一个很好的做法,因为它使它们可聚焦。 Users without a mouse (they exist) can use the Tab key to cycle through the clickable elements and click them with Enter or Spacebar .没有鼠标的用户(它们存在)可以使用Tab键在可点击元素之间循环,然后使用Enter或Spacebar 来点击它们。 The elements mentioned in the first paragraph already incorporate this natively.第一段中提到的元素已经在本地包含了这一点。 With <div>
elements you'll have to add this behavior manually.对于<div>
元素,您必须手动添加此行为。
The example below targets all clickable elements with a class and adds the :focus
selector for the focussed styles.下面的示例针对具有类的所有可点击元素,并为重点样式添加: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>
Sure.当然。 Just remove the [onclick]
in the CSS.只需删除 CSS 中的[onclick]
。
document.getElementById('C').onclick = function(){alert('I am clickable too !')}
div { background-color: green ; margin : 2px } *: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>
However, that also changed the background too, so we can designate a specific class to the divs like so:然而,这也改变了背景,所以我们可以为 div 指定一个特定的类,如下所示:
document.getElementById('C').onclick = function(){alert('I am clickable too !')}
div { background-color: green ; margin : 2px } .hoverme:hover{ background-color: red ; color: blue; }
<div class="hoverme" id="A" onclick='alert("A")'>Click me ! A</div> <div class="hoverme" id="B" onclick='alert("B")'>Click me ! B</div> <div class="hoverme" id="notAclickableElement" >Don't click me :( Z</div> <div class="hoverme" id="C" >Click me ! C</div> <div class="hoverme" id="D" onclick='alert("D")'>Click me ! D</div>
Designating the hover to a single class is much more efficient, because you can define different hover effects for different things.将悬停指定给单个类会更有效率,因为您可以为不同的事物定义不同的悬停效果。 All you have to do is add class="hoverme"
您所要做的就是添加class="hoverme"
You can use .class in CSS.您可以在 CSS 中使用 .class。
document.getElementById('C').onclick = function(){alert('I am clickable too !')}
div { background-color: green ; margin : 2px } *[onclick]:hover{ background-color: red ; color: blue; } .click { background-color: green; } .click:hover { background-color: red; }
<div class="click" id="A" onclick='alert("A")'>Click me ! A</div> <div id="B" onclick='alert("B")'>Click me ! B</div> <div class="click" id="notAclickableElement" >Don't click me :( Z</div> <div class="click" id="C" >Click me ! C</div> <div class="click" id="D" onclick='alert("D")'>Click me ! D</div>
I hope I have been helpful我希望我有所帮助
var x = document.querySelectorAll("div"); for (let i = 0; i < x.length; i++) { if (x[i].id !== 'notAclickableElement') { x[i].setAttribute('class', 'clickclass'); } } document.getElementById('C').addEventListener("click", hoverMe); function hoverMe() { alert('I am clickable too !') }
div { background-color: green; margin: 2px } .clickclass: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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.