I have a css rule applied on a tag like this
a { background-color: #000; }
a:hover {background-color: #ff0000; }
I want to fire its hover behavior using jquery, is it possible? this code is running fine but not change the bg color to red.
$('.me a').mouseenter();
Why I need this? I have to write automated tests for my web application's menu and thats I need it.
The point here is CAN I execute browser behavior attached to a:hover using jquery?
No, you cannot set the hover state programmatically.
As others have pointed out, you can set a class programmatically, and use the same style for the element when hovered or classed:
a.hover, a:hover { ... }
You could do something similar with :focus, which is also programmatically settable (demo).
However, it appears that you have access only to fire javascript at the application, and not to change any parts of its source. What you would have to do, in this scenario, is to change the css rule itself using java script.
In the setup of your tests, you may change all :hover styles to styles that additionally accept a class name:
function allowMockHover() {
// iterate over all styleSheets
for(var i = 0, l = document.styleSheets.length; i < l; i++) {
var s = document.styleSheets[i];
if(s.cssRules == null) continue;
// iterate over all rules in styleSheet
for(var x = 0, rl = s.cssRules.length; x < rl; x++) {
var r = s.cssRules[x];
if(r.selectorText && r.selectorText.indexOf(':hover') >= 0) {
fixRule(r);
}
}
}
}
function fixRule(rule) {
// if the current rule has several selectors, treat them separately:
var parts = rule.selectorText.split(',');
for(var i = 0, l = parts.length; i < l; i++) {
if(parts[i].indexOf(':hover') >= 0) {
// update selector to be same + selector with class
parts[i] = [ parts[i], parts[i].replace(/:hover/gi, '.mock-hover') ].join(',');
}
}
// update rule
rule.selectorText = parts.join(',');
}
Try this
<a href="#">Move the mouse pointer over this paragraph.</a>
$(document).ready(function(){
$("a").mouseover(function(){
$("a").css("background-color","yellow");
});
$("a").mouseout(function(){
$("a").css("background-color","lightgray");
});
});
Jsfiddle examplw http://jsfiddle.net/X5r8r/1110/
Change your CSS rule so that the styles also have a class name:
a:hover,
a.mouseenter
{
background-color: #ff0000;
}
Then you can simply add/remove the class whenever you wish to give the hover effect:
$('.me a').addClass("mouseenter");
Live Demo: http://jsfiddle.net/X3Hm9/
$('.me a').hover(function (){ $(this).css("background-color,"red")},
function(){$(this).css("background-color,"black")});
should help you :)
Here you can learn more about hover() in Jquery http://api.jquery.com/hover/
if you want to reuse the CSS rule, do following
1) change the CSS rule to
a:hover, .hovered {background-color: #ff0000; }
2) add this javascript code
$('.me a').hover(function(){
$(this).addClass('hovered');
},function(){
$(this).removeClass('hovered');
});
One way to do it that I've used is:
start simulating hover:
$('.me a').trigger("mouseover")
end simulating hover:
$('.me a').trigger("mouseleave)
As far as I know, here's not really anyway to trigger the browsers default hover behaviour (that is what you want isn't it?). But even if there was, as you're doing it ( $('a').mouseenter(); ) then you'd just simulate like a fraction of a second of a hover, as just right after it would default to it's normal behaviour. A simpler way to do it might simply be to add a class, like so:
$('a').addClass('is-hover');
with the following css:
a:hover,
a.is-hover {
background: red;
}
There's really no need for a fiddle, but here it is anyway: http://jsfiddle.net/5fqXs/
Try this:
$('.me a').mouseenter(function(){
$(this).css('background', 'red')
});
Reasoning behind this code compared to manipulating the CSS directly is CSS belongs in the stylesheet NOT in the individual pages. Now imagine you want to change the background colour application wide and you're changing the CSS in the jQuery directly, have fun. With the example below you change the .hoverClass in your CSS sheet and you're done.
a { background-color: #000; }
.hoverClass {background-color: #ff0000; }
$('.me a').mouseenter(function(){
$(this).toggleClass('hoverClass');
}).mouseout(function(){
$(this).toggleClass('hoverClass');
});
Although as mentioned this seems utterly pointless since the concept of a hover class is what you are trying to achieve.
.me>a:hover {background-color: #ff0000; }
:hover whenever something else happens, such as at the click of another link.