拉斐爾設置事件

我有一個拉斐爾紙包含多組。每個集合都有一個矩形，一個在矩形上方的路徑和兩個文本，其中一個是不可見的，另一個是在矩形內。我想在鼠標懸停在整個矩形（包括文本）上時更改光標。如果我對文本和矩形使用不同的事件處理程序，並將兩者的光標都更改爲相同的值，則會顯示一個閃爍的文本。這種閃爍使得鼠標懸停不那麼流暢。拉斐爾設置事件

當鼠標移動到整個set上時，我想讓光標變爲手。光標中的一次變化並且不閃爍，直到再次切換矩形邊界爲止。

請幫助我，如果您有任何解決方案卡維塔

來源

2012-07-26 kavita

就拿塊一切都在（說 '.container'），並改變你的CSS來'.container：懸停{光標：指針; }'。 – Chad 2012-07-26 05:37:49

假設你要懸停在整個集，其中包括你的矩形，在矩形和兩個文本上方的路徑影響...

var container = $(id to your Raphael container); 
var yourSet = paper.set(); //assuming you have pushed all four elements into your set.... 
yourSet.mouseover(function(){ 
     container.css('cursor','pointer'); 
} 
yourSet.mouseout(function(){ 
     container.css('cursor','default'); 
}

希望它可以幫助你...

來源

2012-07-26 17:36:55 Aukhan

拉斐爾容器是指紙張？ – kavita 2012-07-31 04:10:59

謝謝！實施我認爲我沒有填補，因此它閃爍 – kavita 2012-07-31 04:35:11

爲了避免從文本到周圍的框移動鼠標的閃爍，我建議使用overlay元素來處理mouseover事件。

當你已經有一個包含所有元素的集合時，你可以很容易地用集合中getBBox的信息創建一個新的重疊元素。

這是一個小片段，它是如何工作的。

<script type="text/javascript"> 
     function drawPreview(){ 
      var preview = Raphael("preview", 200, 100); 
      var box1 = preview.rect(20,20,160,40); 
      box1.attr({'fill':'#ccc','stroke-opacity' : 0, 'opacity':0.5}); 
      var box2 = preview.rect(50,10,30,80); 
      box2.attr({'fill':'#999','stroke-opacity' : 0, 'opacity':0.5}); 
      var line = preview.text(100, 30, "My Text"); 

      var mySet = preview.set(); 
      mySet.push(box1,box2,line); 

      var bb = mySet.getBBox(); 
      var overlay = preview.rect(bb.x,bb.y,bb.width,bb.height); 
      overlay.attr({'fill':'#fff','stroke-opacity' : 0, 'opacity':0}); 
      overlay.mouseover(function(){ 
       this.attr({'cursor':'pointer'}); 
      }); 
      overlay.mouseout(function(){ 
       this.attr({'cursor':'default'}); 
      }); 
     } 
</script>

enter image description here

來源

2012-08-16 12:30:24 surffan

拉斐爾設置事件

回答

相關問題