CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Developer
Developer

Reputation: 21

how to simulate hover of css using javascript

I have a below HTML file and when I manually move cursor on the dummy link, it shows me yellow color, as I have added that style on css hover. Same I would like to simulate with java script. Here below is the image for reference.

image

Please suggest me how to achieve it?

<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
   background-color: yellow;
}
</style>
</head>
<body>

<a href="https://####">dummylink</a>

<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

</body>
</html>

Upvotes: 2

Views: 160

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371208

Use the mouseover and mouseout events:

const a = document.querySelector('a');
a.onmouseover = () => a.style.backgroundColor = 'yellow';
a.onmouseout = () => a.style.backgroundColor = null;
<a href="https://####">dummylink</a>

Upvotes: 3

Related Questions