How to add hover manually with Javascript [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 10 years ago.

Improve this question

I need to tweak a script and hard-write hover to make it visible. How can I do that using javascript.

I tried so far several ways, but it didn't work out.

  document.getElementById("tooltip").className += ":hover";

What are you trying to do? Style an element when the mouse is over it (with JavaScript), or write a CSS rule for the :hover state of the element (so the hover-effect is applied with CSS)? Or use JavaScript to force the element into its :hover state? — David Thomas
– David Thomas, Commented Nov 29, 2014 at 23:19
Actually, this question should be of more help than the other one I posted. TL;DR of it is: create an alternative class that has the same style as the :hover and then add that class to your element. — JCOC611
– JCOC611, Commented Nov 29, 2014 at 23:20
You can't trigger the hover state of an element in JavaScript. You will have to add a normal class with the same CSS as your :hover, then add that class to your element. — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 29, 2014 at 23:42

Miguel · Accepted Answer · 2014-11-30 00:35:08Z

1

One way to do what I believe is what you're trying to achieve, is to toggle a "hover" CSS class.

var tooltip = document.getElementById('tooltip');
var toggle = document.getElementById('toggle');
var isHover = false;

toggle.onclick = function() {
    if (!isHover) {
        tooltip.classList.add('hover');
    } else {
        tooltip.classList.remove('hover');
    }
    isHover = !isHover;
};

#tooltip {
    width: 200px;
    height: 200px;
    background: blue;
}
#tooltip:hover,
#tooltip.hover {
    background: red;
}

<div id="tooltip"></div>
<button id="toggle">toggle hover</button>

You cannot modify a pseudo class (ex :hover) using JavaScript.

answered Nov 30, 2014 at 0:35

Miguel

20.7k5 gold badges47 silver badges68 bronze badges

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

Collectives™ on Stack Overflow

How to add hover manually with Javascript [closed]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related