pasar el cursor, quiero la opacidad = "0.3"; no hover, quiero la opacidad = "1"; y h2 y h3 en cada div el color va de blanco a rojo.
Busqué en Google por todas partes y traté de averiguarlo, pero un novato es un novato. esto es lo que probé pero funciona solo para el primer div. ¿Por qué no puedo trabajar para el resto?
Sé que si uso class, puedo hacerlo con CSS, pero quiero aplicar más funciones para h2 y h3 en cada div. por ejemplo, cuando se desplaza sobre el cuadro, la pantalla h2 y h3 pasa de ninguno a bloque. O colorea de blanco a rojo.
aquí está el enlace el código en la pluma
aquí está el código
HTML
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="box" onmouseover="hover()" onmouseout="nohover()"></div> <div id="box" onmouseover="hover()" onmouseout="nohover()"></div> <div id="box" onmouseover="hover()" onmouseout="nohover()"></div> <div id="box" onmouseover="hover()" onmouseout="nohover()"></div> </body> </html>CSS
#box{ background: blue; width:100px; height: 100px; margin: 20px; }js
function hover() { document.getElementById("box").style.opacity = "0.3"; } function nohover() { document.getElementById("box").style.opacity = "1"; }Simplemente use :hover css selector para agregar los estilos
#box{ background: blue; width:100px; height: 100px; margin: 20px; } #box:hover { opacity: 0.3; } <div id="box" ></div> <div id="box" ></div> <div id="box" ></div> <div id="box" ></div>Use class (.box) en lugar de usar id (#box). Las pautas de accesibilidad web no permiten varias identificaciones.
https://www.w3.org/TR/WCAG20-TECHS/H93.html
.box { background: blue; } .box:hover { background: red }Use this en los eventos onmouse* :
function hover(ev) { ev.style.opacity = "0.3"; } function nohover(ev) { ev.style.opacity = "1"; } <div id="box" onmouseover="hover(this)" onmouseout="nohover(this)"></div>