当我将鼠标悬停在它们上时,我想更改几个颜色的 h1 和 h3 标签,这样对我来说只有一个更改,每个都有它的 ID。
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<meta charset="UTF-8"/>
<title>Ejercicio 2 - Eventos</title><meta charset="utf-8">
<style>
body {font-family:Arial;}
</style>
</head>
<body>
<h1 id="enlace">Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3 id="enlace">Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<div><img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/14067484_1158738217503225_7524550350452532772_n.png?oh=b3024e965f9df64fba062e265fb0fcd1&oe=590C71CE" title="Imagen del producto" alt="imagen producto x-fashion" /></div>
<h3 id="enlace">Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<div><img src="http://cheerskills.com/wp-content/uploads/2012/03/Screen-shot-2012-03-25-at-6.14.58-PM.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></div>
<script type="text/javascript" src="DWEC_T06_Ejercicio2.js"></script>
</body>
</html>
我有这个 javascript 代码
//Funcion que cambia el color de los enlaces a naranja al pasar por encima
document.getElementById("enlace").addEventListener("mouseover", porencima);
document.getElementById("enlace").addEventListener("mouseout", alquitar);
function porencima() {
document.getElementById("enlace").style.color = "orange";
}
function alquitar() {
document.getElementById("enlace").style.color = "brown";
}
首先:您创建函数并在每个元素上的必要事件中调用它们onmouseover = 当鼠标悬停时,onmouseout = 当鼠标从元素上移开时。
您不能拥有多个具有相同
id
属性的元素,因此如果您想对具有某些属性的元素进行分组,建议使用class
或data-attributes
基于此评论并使用事件委托(
eg: Event delegation
),使用class
它的解决方案可能如下:例子
首先,您为不同的 HTML 标签分配了多个ID,请记住,对于单个标签,ID 是唯一的,也就是说,如果您想为不同的元素使用相同的标识符,则只有一个 h1 元素可以包含 id="link",您必须将它用于CLASS就是说它是class="link"。
由于我们不使用 id 你也不能使用 document.getElementById(),你应该使用document.getElementsByClassName()。使用 getElementsByClassName 的问题在于它返回一个包含所有具有该类的元素的数组,也就是说,如果我们有两个元素具有“链接”类
Example:
<h1 class="enlace">soy h1</h1> <h3 class="enlace">Soy h3</h3>
getElementsByClassName 方法将两个对象作为数组返回。然后我们必须参考我们要更改颜色。这是我正在谈论的一个例子:P另一种方法是用 CSS 做,会更容易,但如果你必须用 js 做,有解决方案。我也回复这个