Я хочу изменить несколько цветных тегов h1 и h3 при наведении на них курсора, и таким образом у меня меняется только один, каждый имеет свой идентификатор.
<!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-тегам, помните, что идентификаторы уникальны для одного тега, то есть только один элемент h1 может содержать id="link", если вы хотите использовать один и тот же идентификатор для разных элементов, вы должны используйте его для CLASS , скажем, что это будет class="link" .
Поскольку мы не используем идентификатор, вы также не можете использовать document.getElementById() , вы должны использовать document.getElementsByClassName() . Проблема с использованием getElementsByClassName заключается в том, что он возвращает массив всех элементов, которые имеют этот класс, то есть, если у нас есть два элемента с классом «ссылка» .
Пример :
<h1 class="enlace">soy h1</h1> <h3 class="enlace">Soy h3</h3>
Метод getElementsByClassName вернет оба объекта в виде массива. Затем мы должны обратиться к тому, что мы хотим изменить цвет. Вот пример того, о чем я говорю :PДругой способ - сделать это с помощью CSS, это было бы проще, но если вам нужно сделать это с помощью js, есть решение. Я также отвечаю на это