Read :Hover Pseudo Class with JavaScript

Read :hover pseudo class with javascript

UPDATE: I somehow got this wrong. The below example doesn't work. See @bfavaretto's comment for an explanation.

~~In Firefox, Opera and Chrome or any other browser that correctly implements window.getComputedStyle is very simple. You just have to pass "hover" as the second argument:~~

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
  display: block;
  width: 200px;
  height: 200px;
  background: red;
}
div:hover {
  background: green;
}
</style>
</head>
<body>

<div></div>

<script type="text/javascript">
window.onload = function () {
    var div = document.getElementsByTagName("div")[0];
    var style = window.getComputedStyle(div, "hover");
    alert(style.backgroundColor);
};
</script>
</body>
</html>

~~But I don't believe there's yet a solution for Internet Explorer, except for using document.styleSheets as Gumbo suggested. But there will be differences.~~ So, having a .hover class is the best solution so far. Not unclean at all.

Adding the :hover pseudoclass

You can't programmatically add :hover from JavaScript (or D3). I'd recommend using a CSS class with the same styling rules:

#foo:hover, #foo.selected { ... }

And then add the .selected class from D3.

(See: How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"? )

Can Javascript read from an element's :hover state in CSS?

Update: This answer doesn't work and there is no 100% accurate way to get this information. The second parameter to Window.getComputedStyle() is a pseudo-element and :hover is a pseudo-class. See the duplicate question for more information: Read :hover pseudo class with javascript

~~You can use Window.getComputedStyle() like this:~~

var style = window.getComputedStyle(document.querySelector("#myDiv1"), ":hover").getPropertyValue("background-image");

alert(style);

#myDiv1 {

  background-image: url("http://example.com/firstImage.png");

}

#myDiv1:hover {

  background-image: url("http://example.com/secondImage.png");

}

#myDiv2 {

  background-image: url("http://example.com/thirdImage.png");

}

#myDiv2:hover {

  background-image: url("http://example.com/fourthImage.png");

}

<div id="myDiv1">Hello</div>

<div id="myDiv2">World</div>

How to access :hover pseudo class with jQuery?

If you're simply asking how to modify an existing CSS rule that contains a dynamic pseudo-class, that is not possible by DOM interfacing with jQuery since jQuery deals with DOM elements, not CSS rules — you will need to modify the document stylesheet directly instead, which is often cumbersome. This applies to almost any dynamic pseudo-class, and not just :hover.

A much more elegant approach is to move the new style declarations to a separate CSS rule with a different class name for example, and apply that class to your element as desired. This decouples your style declarations from your script, eliminating the need to modify your styles from your script altogether. To wit:

.nav-collapse a:hover {
   background: #DEDEDE;
   border-radius: 3px;
}

.nav-collapse a.scrolling:hover {
   background: #000;
   color: #fff;
}

And:

$('.nav-collapse a').addClass('scrolling');

Remove Pseudo Class (hover) Javascript

Why not use the :active and :focus states? pure CSS.

#fab:active, #fab:focus {
  box-shadow:none;
}

Demo:

#fab {

  margin-right: 30px;

  color: white;

  font-size: 45px;

  outline: 0;

  border: 0;

  height: 150px;

  width: 150px;

  border-radius: 75px;

  text-align: center;

  background-color: red;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  transition: all 0.2s ease-in-out;

}

#fab:hover {

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

}

#fab:active, #fab:focus {

  box-shadow:none;

}

<button id="fab">+</button>

How detect in javascript :hover on :before element

Pseudo-elements aren't elements, and currently you can't access them via the DOM. So you can't hook event handlers on them. As far as I can tell, you also can't apply pseudo-classes like :hover to them in CSS.

Access element being hovered over with javascript

As mentioned by Obsidian Age, you can use the :hover pseudo-class to select things when they're hovered. You can combine it with a descendant combinator to selectively apply styles to other elements when certain conditions are met. In this case, you could use .article:hover .text for your needs.

Edit: As @Kaiido mentioned, you can use pseudo-classes with querySelectors. So in a mouseenter event, you could use document.querySelector('.article:hover .text') to select the relevant text div, like in the following snippet:

var articleDivs = document.querySelectorAll('.article');

var i;

for (i = 0; i < articleDivs.length; i++) {

  articleDivs[i].addEventListener('mouseenter', function (e) {

    var textDiv = document.querySelector('.article:hover .text');

    // do something with the div

    console.log(textDiv);

  });

}

.article {

  width:200px;

  height:200px;

  background-color:blue;

  margin-bottom: 20px;

}

.text{

  width:50px;

  color: #ddd;

}

.article:hover .text {

  margin-left: 20px;

}

<div class="article">

  <div class="text">

    This is a test. This is a test. This is a test.

  </div>

</div>

<div class="article">

  <div class="text">

    This is also a test. This is also a test. This is also a test.

  </div>

</div>

Read :Hover Pseudo Class with JavaScript