coverting hover jquery code into javascript

Question

I need help converting a Jquery code into a javascript code where it changes the border radius of a div when hovering over it.

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");
        });
    });

jQuery is already in Javascript code, I guess what you ask is to have the equivalent in DOM. — T.Trassoudaine
– T.Trassoudaine, Commented Nov 4, 2021 at 10:26
Still new to this not sure what DOM means, basically just want to know how to convert the java code into jquery or vice-versa. — helpme7
– helpme7, Commented Nov 4, 2021 at 11:09

丹尺爪工れ · Accepted Answer · 2021-11-04 12:20:29Z

1

You can do all of that only using css, but I will provide both solution js and css.

javascript code:

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);

}

To do the same with css you can add a class to make it easer to target.

// css 
<style>
.div-round {
    border-radius: 200px;
}

.div-round:hover {
  border-radius: 0%;
}

</style>

//add class to div
<div class='div-round'>...</div>

answered Nov 4, 2021 at 12:20

丹尺爪工れ

1788 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

helpme7 Over a year ago

Thanks, for the css part you did, is there a way so we dont edit css and make it so javascript adds the border-radius 0% to the div hover section without touching css?

丹尺爪工れ Over a year ago

These are two ways that I would do it, they are separated ways. @helpme7

poorly-written-code Over a year ago

From the documentation: The .hover() method binds handlers for both mouseenter and mouseleave events. ... shorthand for $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );. Which is what this javascript code is doing. Although for something simple like this, I would recommend the css option. And also you could simplify 0% to just 0.

Collectives™ on Stack Overflow

coverting hover jquery code into javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related