Jquery CSS：如何伪造：悬停状态？

这里，我有几个div。当鼠标悬停它们时，会产生一种过渡效果。（如左内角）

我想先假装盘旋。例如，首先将左外角div设置为：hover状态，而不使用用户的实际悬停操作。然后，当用户真正悬停在其他div上时，假悬停状态被取消

对于HTML和CSS：

    <div class="story" id="target">
      <!--content-->
    </div>
    <div class="story">
      <!--content-->
    </div>
    <div class="story">
      <!--content-->
    </div> 

.story{
  background: none repeat scroll 0 0 #2A2A2A;
  &:hover{
    transition: all 0.25s ease-in-out 0s;
    background: none repeat scroll 0 0 lighten(#2A2A2A, 20%);
  }
}

.故事{
背景：无重复滚动0 0#2A2A2A；
&：悬停{
过渡：所有0.25秒均缓进0秒，缓出0秒；
背景：无重复滚动0 0变亮（#2A2A2A，20%）；
}
}

我想做的是：

开始时，

div#target

被强制进入

：hover

状态（因此它具有不同的背景）。稍后，当用户开始使用鼠标并将鼠标悬停到其他div时，其他div将变为

：hover

状态，而

div#target

将返回正常状态

当我们使用输入字段时，它很像一个

自动对焦

更新：
我想在有人进入此页面时立即触发元素的悬停状态

我不确定您到底在问什么，但jQuery的
hover（）
函数正是您想要的

$("#div").hover(function(){
    $(this).css("background-color","red"); //or whatever you want
});

在不使用jQuery的情况下，可以通过以下方式实现：

.box, .left-box {
    /* Default styling. */
}

.box:hover, .left-box {
    /* Hover coloring for box. */
}

.left-box:hover {
    /* Default coloring for box. */
}

实际上，这是一些示例代码：

.box, .left-box {
    background-color: #666666;
    padding: 1em;
}

.box:hover, .left-box {
    background-color: #999999;
}

.left-box:hover {
    background-color: #666666;
}

jQuery
提供
hoverIn
和
hoverOut
事件。如果需要，您可以这样使用它们：

$("#div").hover( function(e){
    // hover in
}, function(e) {
    // hover out
});

或者简单地使用
鼠标悬停
，如下所示：

$("#div").hover( function(e) {
    // hover in
});

.story:hover,
.story.hover {
    transition: all 0.25s ease-in-out 0s;
    background: none repeat scroll 0 0 lighten(#2A2A2A, 20%);
}

您可以将类声明添加到
：hover
CSS规则中，如下所示：

$("#div").hover( function(e) {
    // hover in
});

.story:hover,
.story.hover {
    transition: all 0.25s ease-in-out 0s;
    background: none repeat scroll 0 0 lighten(#2A2A2A, 20%);
}

现在，您可以使用JS向
.story
元素添加类，以模拟悬停效果：

$(document).on("ready", function () {
    $(".story").eq(0).addClass('hover');
});

这将向document ready上的第一个
.story
元素添加悬停效果

下面是一个演示：

我建议使用这种方法，因为它可以很好地处理CSS。如果为
mouseenter
和
mouseleave
设置了事件处理程序，那么可以使用JS使用jQuery的
.trigger（）
函数触发这些事件处理程序：
$（.story”）.eq（0）.trigger（'mouseenter'）
我为您创建了一个解决方案，请在此处查看，希望能有所帮助

<a href='http://jsfiddle.net/vishalj/FQysN/1/'>jsfiddle</a>


将悬停状态css与正常状态css交换。悬停状态是如何管理的？提供一些示例html和css（以及脚本，如果适用）。没有代码，任何人都可以猜测你的页面是如何工作的。除非图片有助于解释代码，否则您应该在问题中提供代码而不是图片。提供的图像几乎没有什么价值value@charlietfl，请参阅我的更新。使用类而不是
，可能会做得更好：悬停
，然后使用脚本切换类@Victor使用jQuery提供了最简单的悬停代码，然后使用toggleClass（）将
this
更改为
$（this）
这很好。但是我们能用一个更简单的吗？毕竟，我们只是在模拟用户的悬停动作。