CSS：如何伪造 :hover 状态？答案

【问题标题】：CSS: How to fake a :hover state?CSS：如何伪造 :hover 状态？
【发布时间】：2013-12-25 23:27:00
【问题描述】：

在这里，我有几个 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

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

jQuery: Automatically trigger hover

【问题讨论】：

用普通状态 css 交换悬停状态 css。 fwiw。
悬停状态如何管理？提供一些示例 html 和 css（如果适用，还有脚本）。如果没有代码，任何人都可以猜测您的页面是如何工作的。除非图像有助于解释代码，否则您应该在此处提供代码而不是图像。提供的图片价值很小
@charlietfl，查看我的更新
使用类而不是:hover 可能会做得更好，然后使用脚本来切换类。 @Victor 使用 jQuery 提供了最简单的悬停代码，然后使用 toggleClass()

标签： jquery css

【解决方案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');
});

这会将悬停效果添加到 document-ready 上的第一个 .story 元素。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

这很好。但是我们可以使用更简单的吗？毕竟，我们只是在模拟用户的悬停动作。

【解决方案3】：

我不确定你到底在问什么，但是 jQuery 的 hover() 函数会是你想要的

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

【讨论】：

将this更改为$(this)

【解决方案4】：

jQuery 提供hoverIn 和hoverOut 事件。如果你愿意，你可以像这样使用它们：

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

或者干脆用hoverIn，像这样：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我已经为您创建了一个解决方案，请在此处查看，希望对您有所帮助

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

【讨论】：