Question 101464 in Html Question posted in
Some basic documentation can be found here.

Html – How to make a hover effect in javascript?

How to make a hover effect in javascript?

I’m getting started in this programming thing. I want to simulate css hover effect in javascript but I don’t know how to do it. It is to apply it on an html element. Could you help me?

Tags:

6

Answers


  1. 0 
    const button = document.querySelector('#myButton');

button.addEventListener('mouseover', () => {
  button.classList.add('hover-effect');
});

button.addEventListener('mouseout', () => {
  button.classList.remove('hover-effect');
});


 var myElement = document.getElementById("my-element");

  myElement.addEventListener("mouseover", function() {
    myElement.classList.add("hover-effect");
  });

  myElement.addEventListener("mouseout", function() {
    myElement.classList.remove("hover-effect");
  });
    .hover-effect {
  background-color: yellow;
  color: red;
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

  .hover-effect {
    background-color: yellow;
  }
    <button id="myButton">Clique em mim!</button>
<div id="my-element">Hover me!</div>
    Login or Signup to reply.
  2. 0

    to do that you can use "mouseover" and "mouseout" events.

    So, if you have an element like this:

    <div id="hoverable">Element to do the hover effect</div>

    you can create some events listener to that element in the next way:

    const hoverableElement = document.getElementById('hoverable');

hoverableElement.addEventListener('mouseover', function() {});
hoverableElement.addEventListener('mouseout', function() {});

    and inside the function/callback that is returned by the addEventListener is where you need to write your logic.

    And the mouseover is an event listening when your mouse is over the element, and the mouseout is an event listening when your mouse was moved out of the element

    Login or Signup to reply.
  3. 0

    To simulate a CSS hover effect in JavaScript, you can use the mouseenter and mouseleave events to detect when the mouse enters and leaves an element, respectively. For example:

    HTML:

    <div id="my-element">
 Hover over me!
</div>

    CSS:

    #my-element {
  background-color: blue;
  color: white;
  padding: 10px;
  transition: background-color 0.5s ease;
}

#my-element:hover {
  background-color: red;
}

    Javascript:

    const element = document.getElementById('my-element');

element.addEventListener('mouseenter', () => {
  element.style.backgroundColor = 'red';
});

element.addEventListener('mouseleave', () => {
  element.style.backgroundColor = 'blue';
});

    We are simulating a CSS hover effect on the my-element’s div. When the mouse enters the element, we change its background color to red, and when the mouse leaves, we change it back to blue. We also add a CSS transition to make the color change smoothly.

    Login or Signup to reply.
  4. 0

    Try using this unique code.
    use the onmouseover and onmouseout codes in the html. can be used in js, jsx

    source = https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover

    <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32">

<script>
function bigImg(x) {
  x.style.height = "64px";
  x.style.width = "64px";
}

function normalImg(x) {
  x.style.height = "32px";
  x.style.width = "32px";
}
</script>
    Login or Signup to reply.
  5. 0

    There is no advantage to using JavaScript (over the css :hover pseudoselector for this). But if you do:

    I really recommend using delegated event listening (as opposed to the examples in other answers). That is: You listen to event for the whole body and the filter out which elements that are targeted.

    Advantages: You only need one event listener for multiple elements + the event listener will work for element added by JavaScript even after you have created the event listener.

    html

    <button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

    js

    document.body.addEventListener('mouseover', e => {
  let button = e.target.closest('button');
  if (!button) { return; }
  button.style.backgroundColor = 'khaki';
});

document.body.addEventListener('mouseout', e => {
  let button = e.target.closest('button');
  if (!button) { return; }
  button.style.backgroundColor = '';
});

    No matter how many buttons (or whatever elements you want to listen to) this code would work…

    Login or Signup to reply.
  6. 0

    There’s no property in js to modify css selectors. However, you can get the css style element and append the text content with your own styles:

    var style = document.querySelector("style");
style.textContent += `
button:hover {
  background-color: blue;
}
`;
    <html>
<style>
  button {
    background-color: red;
  }
</style>

<body>
    <button>Hover me!</button>
</body>
<html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search