Question

我做了一个演示，其中用户点击任何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());
});

由于

Answer 1

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

Answer 2

点击后，您可以在点击后添加此效果：

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

Answer 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所说的那样，只需将所有内容关闭到函数中并添加正确的事件处理程序。

希望这有帮助

Answer 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

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

4 个答案: