Question

当我使用jQuery将鼠标悬停在磁贴上时，我试图调用放置在磁贴上的按钮的悬停事件。但是，它不起作用。这是我使用

的代码

<script >
$( "#tile1" ).hover(function() {
    $('.btn-danger').hover();

 });

</script>

我在头脑中分别与jQuery链接：

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

有谁可以指出问题可能是什么？如果需要，我可以提供有关代码的更多信息。

Answer 1

试试这个：

$("#tile1").hover(function(event) {
  $('.btn-danger').trigger(event.type);
});

<强>更新

看起来你正试图触发CSS中定义的悬停。不幸的是，你无法通过css触发悬停集。另一种方法是将css设置为某个类（为hover编写相同的css），然后分别使用.addClass()和.removeClass()添加/删除类。

<强> See trigger-css-hover-with-js

Answer 2

您需要添加第二个类并在css中处理它。你提到你已经创建了一个悬停类。

我已经为你的风格添加了hovered课程。当鼠标悬停在按钮上，或者hovered类被添加到按钮时，样式将适用。

.btn-danger:hover, .btn-danger.hovered{
     background: rgba(41, 128, 185,1.0); 
     border-color: rgba(41, 128, 185,1.0);
}

然后，在我添加的hover事件中，我添加了hovered类。

$( ".tile" ).hover(function() {
    $(this).find('.btn-danger').addClass('hovered');
 }, function() {
    $(this).find('.btn-danger').removeClass('hovered');
 });

编辑：

但是，如果按钮嵌套在磁贴上，则可以使用此选择器在css中执行此操作。

.btn-danger:hover, .tile:hover .btn-danger{
     background: rgba(41, 128, 185,1.0); 
     border-color: rgba(41, 128, 185,1.0);
}

调用另一个元素的悬停事件时调用元素的悬停事件

2 个答案: