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.這是獲得最高的方式，左，右，底部的參數：

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.這是一個替換懸停（）方法，只有當鼠標移動和按鈕的一個範圍，我們可以做我們想要的操作，很酷吧:)/

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