Simulating a CSS hover with javascript

Question

I have a page with the following code in order to show grandchildrens when I hover a parent.

.parent:hover .grandchildren {
    visibility: visible;
    opacity: 1;
}

I want to adjust the grandchildren and its children's styles.

Every time I make a few modifications and refresh the page, I have to look for the said parent in developer tools and switch its state to "hover" by clicking the little checkbox.
Now I am using a laptop without a mouse, you can imagine how this repetitive F12 pressing, HTML element locating, and checkbox clicking could be annoying.

So I am thinking if there is anyway to make the said parent element automatically 'hovered' every time I refresh the page (of course only when I am still developing the page).

I've tried the following, but none of them works:

$('.parent').mouseover()
$('.parent').hover()
$('.parent').trigger('mouseover')

I guess it is because the hover is a CSS thing and the above only trigger jQuery events which don't trigger CSS hover.

Am I right? Actually I could use a brief illustration of the differences between CSS hover and jQuery hover.

So is there any way to simulate a hover, besides the way provided by browser developer tools?

could you not just remove :hover from your css selector while you're testing it? ok, so you probably already have a selector without hover but you could over ride it with !important — andrew
– andrew, Commented Dec 12, 2014 at 18:48
jQuery's hover() is probably the best way to create a hover effect in JavaScript, however you can't force the pseudo-class for css. I would recommend creating a .hover class and using jQuery to add/remove that class. — Howard Renollet
– Howard Renollet, Commented Dec 12, 2014 at 18:50
Either remove the pseudo selector for testing purposes as @andrew suggested or make the hover CSS a class and then use a button to toggle the class. — APAD1
– APAD1, Commented Dec 12, 2014 at 18:51
@andrew I have thought of this, but I am using a template where the CSS governing this hover effect is littered around many places, to remove all the :hover is also not a easy job, but you are right, this is worth doing. However, my question is more for learning purpose - is there any way to simulate a pseudo hover? — shenkwen
– shenkwen, Commented Dec 12, 2014 at 19:03

Rick Hitchcock · Accepted Answer · 2014-12-12 19:40:03Z

Given these styles:

p:hover {
  background: yellow;
  border: 1px solid black;
}

p {
  background: lightgreen;
  color: blue;
}

… you could simulate a permanent hover by changing the stylesheet to look like this:

p {
  background: yellow !important;
  border: 1px solid black !important;
}

p {
  background: lightgreen;
  color: blue;
}

Note that I removed :hover from the first selector, and I added !important to all its styles.

This will cause p elements to have a yellow background, black border, and still maintain their default blue color.

The following works in Chrome, Opera, and Safari. If you need an IE or Firefox solution, let me know:

function change() {
  var ss= document.styleSheets;
  for(var i = 0 ; i < ss.length ; i++) {
    var rules= ss[i].cssRules ? ss[i].cssRules : ss[i].rules;
    for(var j = 0 ; j < rules.length ; j++) {
      if(rules[j].selectorText==='p:hover') {
        rules[j].selectorText= 'p';
        rules[j].style.cssText= rules[j].style.cssText.replace(/;/g,' !important;');
      }
    }
  }
}

p:hover {
  background: yellow;
  border: 1px solid black;
}

p {
  background: lightgreen;
  color: blue;
}

<button onclick="change()">Change <b>p:hover</b> to <b>p</b></button>
<p>Testing</p>

Collectives™ on Stack Overflow

Simulating a CSS hover with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related