Quiero cambiar varias etiquetas h1 y h3 de color cuando paso sobre ellos y de esta forma solo me cambia uno, cada uno tiene su 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>
Tengo este codigo 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";
}