Javascript 鼠标悬停和鼠标移出事件是否使用而不是单击？

我制作了一个演示，其中用户单击任何div。它将转到顶部并在标签上设置背景色文本。例如，如果我单击绿色，它将转到顶部并在顶部写入绿色文本。但我需要使用鼠标悬停和鼠标悬停事件的相同功能。当用户触摸开始并触摸移动或鼠标悬停和鼠标悬停事件时，它将顺时针和逆时针旋转，并将文本设置在顶部。我使功能在单击时运行良好，但我需要鼠标悬停和鼠标悬停，以便我将其顺时针和逆时针旋转顺时针方向的

---

谢谢

jQuery有两种方法mouseover和mouseout

下面是一个如何向这些事件添加侦听器的示例，我没有更新您的函数来执行旋转

var arr = ["red","pink","blue","green"];

function doStuff(){
         $('.colorName').text($(this).attr('class'));  

        //alert($(this).closest('#full').html());

        var sel = arr.indexOf($(this).attr('class'));

        $(this).closest('#full').find('div')
            .first().removeClass().addClass(arr[sel])
            .next().removeClass().addClass(arr[(sel+1)%4])
            .next().removeClass().addClass(arr[(sel+2)%4])
            .next().removeClass().addClass(arr[(sel+3)%4]);

        //alert($(this).closest('#full').html());
}

$('#full').on('mouseout', 'div', doStuff);
$('#full').on('mouseover', 'div', doStuff);

---

您可以在单击后添加此项，以在单击时获得相同的效果：

$('#full').on('click mouseenter touchstart', 'div', function() { ... });

---

单击

事件正常。因此，为了只处理

mouseover

和

mouseout

让我们使用CSS和

：hover

伪类

#全div{
-webkit转换：-webkit转换1000ms缓解；
-moz转换：-moz转换1000ms缓解；
-ms转换：-ms转换1000ms缓解；
-o-转换：-o-转换1000ms缓解；
转换：转换1000ms缓解；
}
#全俯仰：悬停{
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}

---

这是您更新的

如果我没有弄错，您希望在mouseover/mouseout上获得相同的效果

只需在事件上添加一个处理程序，如下所示

$('#full div').hover(function(){
    $('.colorName').text($(this).attr('class')); 

    var sel = arr.indexOf($(this).attr('class'));

    $(this).closest('#full').find('div')
        .first().removeClass().addClass(arr[sel])
        .next().removeClass().addClass(arr[(sel+1)%4])
        .next().removeClass().addClass(arr[(sel+2)%4])
        .next().removeClass().addClass(arr[(sel+3)%4]);

}, function(){
    return false;
})

或者，如前所述，只需将所有内容关闭到函数中并添加正确的事件处理程序

希望这有帮助

$('#full div').hover(function(){
    $('.colorName').text($(this).attr('class')); 

    var sel = arr.indexOf($(this).attr('class'));

    $(this).closest('#full').find('div')
        .first().removeClass().addClass(arr[sel])
        .next().removeClass().addClass(arr[(sel+1)%4])
        .next().removeClass().addClass(arr[(sel+2)%4])
        .next().removeClass().addClass(arr[(sel+3)%4]);

}, function(){
    return false;
})