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

Question

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

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

对于HTML＆amp; 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

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设置了事件处理程序，则可以使用JS使用jQuery的.trigger()函数触发这些事件处理程序：$(".story").eq(0).trigger('mouseenter');

Answer 2

我不确定你问的是什么，但是jQuery的hover()功能将是你想要的

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

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

Answer 4

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

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

或仅使用hoverIn，如下所示：

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

Answer 5

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

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

Answer 6

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

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