Necesito ayuda para convertir un código Jquery en un código javascript donde cambia el radio del borde de un div al pasar el mouse sobre él.
HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="SampleQ3.css" /> </head> <body> <div> <h4>Pasta</h4> </div> <script src="SampleJavaScript.js"></script> </body> </html> JS $(document).ready(function () { $("div").hover(function () { $(this).css("border-radius", "0%"); }, function () { $(this).css("border-radius", "200px 200px 200px 200px"); }); });Puede hacer todo eso solo usando css, pero proporcionaré la solución js y css.
codigo javascript:
let divs = document.getElementsByTagName("div"); for(div of divs) { div.addEventListener("mouseenter", function( event ) { event.target.style.borderRadius = 0%; }, false); div.addEventListener("mouseover", function( event ) { event.target.style.borderRadius = '200px'; }, false); }Para hacer lo mismo con css, puede agregar una clase para facilitar el objetivo.
// css <style> .div-round { border-radius: 200px; } .div-round:hover { border-radius: 0%; } </style> //add class to div <div class='div-round'>...</div>