CSS：如何模拟:hover状态？

Question

这里有几个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%);
  }
}

我的需求：

开始时，div#target 被强制进入 :hover 状态（因此具有不同的背景）。稍后，当用户开始使用鼠标并悬停到其他 div 上时，其他 div 会变为 :hover 状态，而 div#target 回到正常状态。

这就像是在使用输入字段时的 autofocus 一样。

更新： 我想要在有人进入这个页面时立即触发元素的 hover 状态。

jQuery: Automatically trigger hover

- cqcn1991

---

将您的悬停状态CSS与正常状态CSS交换。FWIW。 - Salman

hover状态是如何管理的？提供一些HTML和CSS示例（如果适用，还可以提供脚本）。如果没有代码，你的页面是如何工作的就很难猜出来。除非图像有助于解释代码，否则在这里的问题中应该提供代码而不是图像。提供的图像价值很小。 - charlietfl

@charlietfl，请查看我的更新。 - ZK Zhao

最好使用类而不是:hover，然后使用脚本来切换类。@Victor提供了使用jQuery的最简单的悬停代码，然后使用toggleClass()。 - charlietfl

Answer 1

你可以在你的:hover CSS规则中添加一个类声明，像这样：

：

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

这将在文档准备就绪时为第一个.story元素添加悬停效果。

这是一个演示：http://jsfiddle.net/fKupb/

我建议使用这种方法，因为它与CSS兼容。如果您已经设置了mouseenter和mouseleave的事件处理程序，那么您可以使用jQuery的.trigger()函数来触发这些事件处理程序：$(".story").eq(0).trigger('mouseenter');

- Jasper

Answer 2

我不确定你具体在问什么，但是jQuery的hover()函数可能是你想要的。

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

- scrblnrd3

---

将 this 改为 $(this)。 - dcodesmith

Answer 3

不使用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;
}

- Kanoshi

---

这很好。但是我们能不能使用一个更简单的方法呢？毕竟，我们只是模拟用户的悬停动作。 - ZK Zhao

Answer 4

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

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

或者只需使用hoverIn，像这样：

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

- Victor

Answer 5

$("#someObj").on('mouseover', function () {
        //do something on mouse over
    });

    $("#someObj").on('mouseleave', function () {
        //do something on mouse out
    });

- Ori Refael

Answer 6

我为您创建了一个解决方案，希望这里的检查可以帮到您。

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

- user2509485