mouseover 和 mouse out 事件使用而不是单击？答案

【问题标题】：mouseover and mouse out event use instead of click?mouseover 和 mouse out 事件使用而不是单击？
【发布时间】：2014-03-18 18:24:37
【问题描述】：

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

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

$('#full').on('click', 'div', function() {

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

谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你可以在点击后添加这个，点击时的效果是一样的：

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

【讨论】：

【解决方案2】：

jQuery有两个方法mouseover和mouseout；

http://api.jquery.com/mouseover/

http://api.jquery.com/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);

【讨论】：

【解决方案3】：

如果我猜对了，您希望鼠标悬停/鼠标悬停也有相同的效果。

只需在事件上添加一个处理程序，就像这样

$('#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;
})

或者，就像Dean 所说，只需将所有内容都关闭到一个函数中并添加正确的事件处理程序。

希望对你有帮助

【讨论】：

【解决方案4】：

click 事件很好。所以只处理mouseover 和mouseout 让我们使用CSS 和:hover 伪类！

#full div {
    -webkit-transition: -webkit-transform 1000ms ease-out;
    -moz-transition: -moz-transform 1000ms ease-out;
    -ms-transition: -ms-transform 1000ms ease-out;
    -o-transition: -o-transform 1000ms ease-out;
    transition: transform 1000ms ease-out;
}
#full div:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

这是您更新后的FIDDLE

【讨论】：