触发css：使用jquery悬停

我在这样的标签上应用了css规则

a { background-color: #000; }
a:hover {background-color: #ff0000; }

我想使用jquery触发它的悬停行为，可能吗？此代码运行正常，但不会将bg颜色更改为红色

$('.me a').mouseenter();

为什么我需要这个？ 我必须为我的web应用程序的菜单编写自动测试，这正是我所需要的

这里的要点是，我可以使用jquery执行附加到：hover的浏览器行为吗？

试试这个：

$('.me a').mouseenter(function(){
    $(this).css('background', 'red')
});

试试这个：

$('.me a').mouseenter(function(){
    $(this).css('background', 'red')
});

我应该帮助你：）

在这里，您可以了解有关Jquery中hover（）的更多信息

我应该帮助你：）

在这里，您可以在Jquery中了解有关hover（）的更多信息

<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");
  });
});

$（文档）.ready（函数（）{
$（“a”）.mouseover（函数（）{
$（“a”）.css（“背景色”、“黄色”）；
});
$（“a”）.mouseout（函数（）{
$（“a”）.css（“背景色”、“浅灰色”）；
});
});

jshiddle示例

<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");
  });
});

$（文档）.ready（函数（）{
$（“a”）.mouseover（函数（）{
$（“a”）.css（“背景色”、“黄色”）；
});
$（“a”）.mouseout（函数（）{
$（“a”）.css（“背景色”、“浅灰色”）；
});
});

---

jsFIDLE examplw

更改CSS规则，使样式也具有类名：

a:hover,
a.mouseenter
{
   background-color: #ff0000;
}

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(',');
}

然后，只要您希望实现悬停效果，就可以简单地添加/删除该类：

$('.me a').addClass("mouseenter");

---

实时演示：

更改CSS规则，使样式也具有类名：

a:hover,
a.mouseenter
{
   background-color: #ff0000;
}

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(',');
}

然后，只要您希望实现悬停效果，就可以简单地添加/删除该类：

$('.me a').addClass("mouseenter");

---

实时演示：

与直接操作CSS相比，此代码背后的推理是CSS属于样式表，而不属于单个页面。现在，假设您想在整个应用程序范围内更改背景颜色，并且直接在jQuery中更改CSS，那么就玩得开心吧。通过下面的示例，您可以在CSS工作表中更改.hoverClass，就完成了

a { background-color: #000; }
.hoverClass {background-color: #ff0000; }



$('.me a').mouseenter(function(){
     $(this).toggleClass('hoverClass');
}).mouseout(function(){
     $(this).toggleClass('hoverClass');
});

尽管如前所述，这似乎毫无意义，因为hover类的概念是您试图实现的

.me>a:hover {background-color: #ff0000; }

---

与直接操作CSS相比，此代码背后的原因是CSS属于样式表，而不属于单个页面。现在，假设您想在整个应用程序范围内更改背景颜色，并且直接在jQuery中更改CSS，那么就玩得开心吧。通过下面的示例，您可以在CSS工作表中更改.hoverClass，就完成了

a { background-color: #000; }
.hoverClass {background-color: #ff0000; }



$('.me a').mouseenter(function(){
     $(this).toggleClass('hoverClass');
}).mouseout(function(){
     $(this).toggleClass('hoverClass');
});

尽管如前所述，这似乎毫无意义，因为hover类的概念是您试图实现的

.me>a:hover {background-color: #ff0000; }

---

据我所知，这里并没有触发浏览器默认的悬停行为（这就是你想要的，不是吗？）。但是，即使有，当你在做（

$（'a'）.mouseenter（）；

）的时候，你也只需要像悬停的几分之一秒那样进行模拟，就在它刚开始的时候，它会默认为它的正常行为。更简单的方法可能是添加一个类，如下所示：

$('a').addClass('is-hover'); 

使用以下css：

a:hover,
a.is-hover {
    background: red;
}

---

真的不需要小提琴，但它就在这里：

据我所知，这里并没有触发浏览器默认的悬停行为（这就是你想要的，不是吗？）。但是，即使有，当你在做（

$（'a'）.mouseenter（）；

）的时候，你也只需要像悬停的几分之一秒那样进行模拟，就在它刚开始的时候，它会默认为它的正常行为。更简单的方法可能是添加一个类，如下所示：

$('a').addClass('is-hover'); 

使用以下css：

a:hover,
a.is-hover {
    background: red;
}

---

确实不需要小提琴，但无论如何，它就在这里：

如果您想重用CSS规则，请执行以下操作

1） 将CSS规则更改为

a:hover, .hovered {background-color: #ff0000; }

2） 添加此javascript代码

$('.me a').hover(function(){
  $(this).addClass('hovered');
},function(){
  $(this).removeClass('hovered');
});

---

如果要重用CSS规则，请执行以下操作

1） 将CSS规则更改为

a:hover, .hovered {background-color: #ff0000; }

2） 添加此javascript代码

$('.me a').hover(function(){
  $(this).addClass('hovered');
},function(){
  $(this).removeClass('hovered');
});

---

我使用的一种方法是：

开始模拟悬停：

$（'.me a'）.trigger（“鼠标悬停”）

结束模拟悬停：

---

$（'.me a'）.trigger（“mouseleave”）

我使用的一种方法是：

开始模拟悬停：

$（'.me a'）.trigger（“鼠标悬停”）

结束模拟悬停：

---

$（'.me a'）.trigger（“mouseleave）

否，您无法通过编程方式设置

悬停

状态

正如其他人所指出的，可以通过编程方式设置类，并在悬停或分类时对元素使用相同的样式：

a.hover, a:hover { ... }

您可以使用

：focus

执行类似的操作，它也是可编程设置的（）

但是，您似乎只能在应用程序中启动javascript，而不能更改其源代码的任何部分。在这个场景中，您需要做的是使用java脚本更改css规则本身

在测试设置中，您可以将所有

：hover

样式更改为另外接受类名的样式：

a:hover,
a.mouseenter
{
   background-color: #ff0000;
}

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(',');
}

函数allowMockHover（）{
//迭代所有样式表
for（var i=0，l=document.styleSheets.length；i=0）{
固定规则（r）；
}
}
}
}
函数固定规则（规则）{
//如果当前规则有多个选择器，请分别处理它们：
var parts=rule.selectorText.split（'，'）；
对于（变量i=0，l=parts.length；i=0）{
//将选择器更新为与类相同+选择器
部分[i]=[parts[i]，parts[i]。替换（/：hover/gi，'.mock hover'））。连接（'，'）；
}
}
//更新规则
rule.selectorText=parts.join（'，'）；
}

---

否，您无法通过编程方式设置

悬停状态

正如其他人所指出的，您可以通过编程方式设置类，并对e使用相同的样式