RaphaelJS HTML5 Library : 마우스 오버시 텍스트 및 광선이 포함 된 버튼 만들기

Question

Raphael JavaScript 라이브러리를 사용하여 텍스트가있는 버튼을 만들려고합니다. 마우스 오버시 버튼 주위에 빛이 나타나고 싶습니다. 사각형과 텍스트 세트를 사용하고 세트에 광선을 적용하여이 작업을 수행했습니다. 마우스 오버 및 마우스 아웃 메서드를 결과 집합의 단추에 바인딩하는 두 가지 방법을 시도했습니다. 첫 번째 경우에는 커서가 텍스트에 도달하면 발광이 유지되고 두 번째에서는 발광이 사라집니다. 여기 코드는 다음과 같습니다

// canvas 
var paper = Raphael(0, 0, "100%", "100%"); 

// background of the first button 
var bBox1 = paper.rect(100, 100, 120, 50, 10).attr({ 
    fill: 'darkorange', 
    stroke: '#3b4449', 
    'stroke-width': 2 
}); 
// text of the first button 
var text1 = paper.text(bBox1.attrs.x + bBox1.attrs.width/2, bBox1.attrs.y + bBox1.attrs.height/2, 'Click to expand').attr({ 
    "font-family": "Helvetica", 
    "font-size": 16 
}); 

// set of rectangle + text = button 
var button1 = paper.set().attr({ 
    cursor: 'pointer' 
}); 
button1.push(bBox1); 
button1.push(text1); 

button1.mouseover(function (event) { 
    this.oGlow = bBox1.glow({ 
     opacity: 0.85, 
     color: 'gray', 
     width: 15 
    }); 
}).mouseout(function (event) { 
    this.oGlow.remove(); 
}); 

// ********** now the second button ********** 
// background of the second button 
var bBox2 = paper.rect(100, 200, 120, 50, 10).attr({ 
    fill: 'lightblue', 
    stroke: '#3b4449', 
    'stroke-width': 2 
}); 
// text of the first button 
var text2 = paper.text(bBox2.attrs.x + bBox2.attrs.width/2, bBox2.attrs.y + bBox2.attrs.height/2, 'Click to expand').attr({ 
    "font-family": "Helvetica", 
    "font-size": 16 
}); 

// set of rectangle + text = button 
var button2 = paper.set().attr({ 
    cursor: 'pointer' 
}); 
button2.push(bBox2); 
button2.push(text2); 

// function for the mousover event for buttons 
var buttonMouseoverHandler = function (event) { 
    this.oGlow = this.glow({ 
     opacity: 0.85, 
     color: 'gray', 
     width: 15 
    }); 
} 

// function for the mouseout event 
var buttonMouseoutHandler = function (event) { 
    this.oGlow.remove(); 
} 

button2.mouseover(buttonMouseoverHandler); 
button2.mouseout(buttonMouseoutHandler); 

다음

작업 jsfiddle 예이다 : 나는 절대적으로 행동의 차이를 이해하지 못하는

http://jsfiddle.net/fkNhT/가, 누군가가 나에게 힌트를주지하시기 바랍니다 수는?

Answer 1

간단한 : 첫 번째 마우스 오버에 상관없이 마우스를 올리면되고 있는지의, RECT 개체의 빛을 설정하는 :

this.oGlow = bBox1 .glow ({...

두 번째에서

, 당신은 "이"때 마우스를 위에 텍스트 개체에 적용 할 할을 설정하는 :

this.oGlow = 이 .glow ({...을

요소의 내부 요소에서 호버 상실을 방지하는 방법은 가장 일반적인 Raphael 관련 질문 중 하나입니다. 소규모 프로젝트의 경우 간단한 해결책은 this을, 큰 프로젝트를 위해서는 this open thread을 참조하십시오.