Trigger CSS Hover with Js

Trigger css hover with JS

I know what you're trying to do, but why not simply do this:

$('div').addClass('hover');

The class is already defined in your CSS...

As for you original question, this has been asked before and it is not possible unfortunately.
e.g. http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

However, your desired functionality may be possible if your Stylesheet is defined in Javascript. see:
http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Hope this helps!

How to trigger CSS hover state using Javascript?

If you could accept using :focus instead of hover, you can use:

var links = document.getElementsByTagName('a');
links[0].focus();

JS Fiddle demo.

Or

var linkToFocus = document.getElementById('link');
linkToFocus.focus();

JS Fiddle demo.

This approach, obviously, requires adapting your CSS to include the a:focus style:

a:link, a:visited {
    background-color: #fff;
}
a:hover, a:focus, a:active {
    background-color: #f00;
}

Trigger the css:hover event with js

Instead of doing it this way, I suggest you just add a class to the other tag. In jQuery it would be:

 $(window).load(function() {
    $('.trigger-animate').hover(function(){
        $('.animate').addClass('hover');
    });
}

I'd recommend using this method, because it handles both onMouseOver and onMouseOut (this way you can also remove the class when your mouse leaves $('.trigger-animate') if you so desired using this syntax:

.hover( handlerIn(eventObject), handlerOut(eventObject) )
 checking out the documentation

Trigger css hover in javascript

You can use jQuery's hover method and toggle the hover class on your container.

$('.flip-container').hover(function() { $(this).toggleClass('hover');});

.flip-container { position: absolute; perspective: 1000; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 25%;}
.flip-container, .flip-container .front, .flip-container .back { -moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px; width: 150px; height: 150px; overflow: hidden;}
.front img, .back img{ width: 150px; height: 150px;}
.flip-container .flipper { transition: 3s; transform-style: preserve-3d; position: relative;}
.flip-container .flipper .front, .flip-container .flipper .back { backface-visibility: hidden; position: absolute; top: 0; left: 0;}.flip-container .flipper .front { z-index: 2; transform: rotateY(0deg);}.flip-container .flipper .back { transform: rotateY(180deg);}
/*.flip-container:hover .flipper,*/ .flip-container.hover .flipper { transform: rotateY(720deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="flip-container">    <div class="flipper">     <div class="front">      <img src="http://i.imgur.com/YS84SGq.png" alt="Sample Image" />     </div>     <div class="back">      <img src="http://i.imgur.com/lDR0Xj8.png" alt="Sample Image" />     </div>    </div>   </div>

Trigger css hover with jQuery

You can do this with pure CSS and no jQuery by using the adjacent selector (~). I've implemented it in the snippet below and had to add a few HTML classes. Here's an example of how that works:

.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after

The above snippet says... if you hover the .list-ny menu item, then select an adjacent .location element that has a .dot-ny:before in it and apply the relevant styles.

Here's the full example with the hover implemented for all relevant properties:

a {  text-decoration: none;}
a:hover {  color: #d82631;}
.location {  position: absolute;}
.kart_dot {  position: relative;  width: 20px;  height: 20px;  margin-top: -10px;  margin-left: -10px;  cursor: pointer;}
.kart_dot::before {  display: block;  content: "";  position: absolute;  top: 50%;  left: 50%;  width: 12px;  height: 12px;  background: #d82631 none repeat scroll 0% 0%;  border-radius: 50%;  margin-top: -6px;  margin-left: -6px;}
.kart_dot:hover::before,.kart_dot:focus::before,.kart_dot:active::before,.list-ny:hover ~ .location .dot-ny .kart_dot:before,.list-wa:hover ~ .location .dot-wa .kart_dot:before {  background-color: #000;  -webkit-transition: all 0.20s ease-in-out !important;  -moz-transition: all 0.20s ease-in-out !important;  -ms-transition: all 0.20s ease-in-out !important;  -o-transition: all 0.20s ease-in-out !important;  width: 18px;  height: 18px;  margin-top: -9px;  margin-left: -9px;}
[data-tooltip]:before,[data-tooltip]:after,.tooltip:before,.tooltip:after {  position: absolute;  visibility: hidden;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);  opacity: 0;  -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);  -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);  -webkit-transform: translate3d(0, 0, 0);  -moz-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);  pointer-events: none;}
[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus:before,[data-tooltip]:focus:after,.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after,.list-ny:hover ~ .location .dot-ny:before,.list-ny:hover ~ .location .dot-ny:after,.list-wa:hover ~ .location .dot-wa:before,.list-wa:hover ~ .location .dot-wa:after {  visibility: visible;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);  opacity: 1;}
.tooltip:after,[data-tooltip]:after {  z-index: 1000;  padding: 15px;  width: 160px;  color: #000;  content: attr(data-tooltip);  font-size: 14px;  line-height: 0.9;}
.tooltip-hoyre:before,.tooltip-hoyre:after {  bottom: 50%;  left: 100%;}
.tooltip-hoyre:before {  margin-bottom: 0;  margin-left: -8px;  border-top-color: transparent;  border-right-color: #000;  border-right-color: hsla(0, 0%, 20%, 0.9);}
.tooltip-hoyre:hover:before,.tooltip-hoyre:hover:after,.tooltip-hoyre:focus:before,.tooltip-hoyre:focus:after,.list-ny:hover ~ .location .dot-ny:before,.list-ny:hover ~ .location .dot-ny:after,.list-wa:hover ~ .location .dot-wa:before,.list-wa:hover ~ .location .dot-wa:after {  -webkit-transform: translateX(12px);  -moz-transform: translateX(12px);  transform: translateX(12px);}
.tooltip-hoyre:after {  margin-left: 0;  margin-bottom: -16px;  margin-left: -18px;}

<div class="list-ny"><a href="#new_york">New York</a></div><div class="list-wa"><a href="#washington">Washington</a></div>
<div class="location" style="top: 20%; left: 20%;">  <a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">    <div class="kart_dot"></div>  </a></div>
<div class="location" style="top: 38%; left: 20%;">  <a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">    <div class="kart_dot"></div>  </a></div>

Javascript simulate hover triggering CSS properties

Add another css rule identical to :hover but for a class, say '.hover'

#przyciski a:hover,  #przyciski a.hover
{
 color:orange;
 text-decoration:none;
 cursor: hand;
}

Say you have image

<img src="img/kwadrat.jpg"/>

Add handler to mouseover/mouseout events to trigger class on your ancor

$('img').on('mouseover', function () {
   $('#przyciski a').addClass('hover')
})

$('img').on('mouseout', function () {
   $('#przyciski a').removeClass('hover')
})

Update:

There is also shorthand for this:

$('img').hover( handlerIn, handlerOut )

And

$( 'img' ).hover( handlerInOut)

So you can do a one liner:

$('img').hover($('#przyciski a').toggleClass.bind('hover'))

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

You can't. It's not a trusted event.

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events.

You have to add a class and add/remove that on the mouseover/mouseout events manually.

---

Related Topics