jQuery Mobile：如何检测一个移动的图像悬停在按钮上的时间

Question

在我的移动应用中，我需要在网页上移动绿色图像。 当绿色图像悬停在提交按钮上时，该按钮将显示“提交？”，当用户在提交按钮上垂下绿色图像时，该按钮将变为橙色。

这是图片：

问题是当绿色图像悬停在按钮上时，按钮无法更改，只有当我触摸按钮时它才能改变。我尝试过hover（）和mouseover（）方法，都没有用。它是 jQuery Mobile ，在我的PC版本中，一切都运行良好，但移动应用程序却不同。

那么，我该怎么办，当绿色图像悬停在按钮上时，它会显示“提交？”？或者，当绿色图像悬挂在其中一个上方时，有没有办法检测到该对象是“是”还是“否”按钮？

这里是代码：拖放方法来自另一个JS文件，但不应该影响这个问题。

id = "html";
    $(id).ready(function (e) {

$('.yes').bind('mouseover', function( event, ui ){
    $('.yes').attr("src","images/submit_confirm.png");
    $('input[name=stimulusResponse]').val("yes");
    $('.no').attr("src","images/no.png");
});
$('.no').mouseover(function( event, ui ){
    $('.no').attr("src","images/submit_confirm.png");
    $('input[name=stimulusResponse]').val("no");
    $('.yes').attr("src","images/yes.png");
});

$('.bottomGoButton').drag(function( ev, dd ){
    $( this ).css({
        top: dd.offsetY,
        left: dd.offsetX
    });
    $(this).bind('vmousemove', function(event) {
        $('input[name=test]').val(event.pageX + ", " + event.pageY + $('input[name=test]').val());
    });
});

$('.no').drop(function(){
     $('input[name=stimulusResponse]').val("no");
     $('.no').attr("src","images/submitted_no.png");         
});

$('.yes').drop(function(){
     $('input[name=stimulusResponse]').val("yes");
     $('.yes').attr("src","images/submitted_yes.png");       
});             

}）;

Answer 1

我已经通过使用按钮和鼠标的位置来完成每个操作来解决这个问题，这增加了更多的灵活性。

以下是代码的一部分： 1.这是获得top，left，right，bottom参数的方法：

var yesPosition = $('.yes').position(), noPosition = $('.no').position(),
                yesWidth = $('.yes').width(), yesHeight = $('.yes').height(),
                noWidth = $('.no').width(), noHeight = $('.no').height();
            //get the relative position of yes/no button
            var yesTop = yesPosition.top, yesLeft = yesPosition.left, 
                yesBottom = yesTop + yesHeight, yesRight = yesLeft + yesWidth,
                noTop = noPosition.top, noLeft = noPosition.left,
                noBottom = noTop + noHeight, noRight = noLeft + noWidth;    

/ 2。这是hover（）方法的替代，只有当鼠标移动并且在其中一个按钮的范围内时，我们才能进行我们想要的操作，非常酷吧：） /

if(isMouseUp == false && event.pageX >= yesLeft && event.pageX <= yesRight && event.pageY >= yesTop && event.pageY <= yesBottom) {
                            $('input[name=test]').val("X: " + event.pageX + ", " + event.pageY); 
                            $('.yes').attr("src","images/submit_confirm.png");
                            $('input[name=stimulusResponse]').val("yes hover");
                            $('.no').attr("src","images/no.png");
                        }
                        else if (isMouseUp == false && event.pageX >= noLeft && event.pageX <= noRight && event.pageY >= noTop && event.pageY <= noBottom) {
                            $('input[name=test]').val("X: " + event.pageX + ", " + event.pageY); 
                            $('.no').attr("src","images/submit_confirm.png");
                            $('input[name=stimulusResponse]').val("no hover");
                            $('.yes').attr("src","images/yes.png");
                        }
                        else {
                            $('input[name=stimulusResponse]').val("");
                            $('.yes').attr("src","images/yes.png");
                            $('.no').attr("src","images/no.png");
                        }