jQueryのは、PHP上でマウスの

は、だから私はボタンの上にマウスオーバーで発生したいSVG層とスタイルの塗りつぶしの色が呼び出された上で色を変更することです。

.ShirtColor{fill:'.$s20[1][5].'

とマウスアウトをする：

.ShirtColor{fill:'.$fabric_selected[$line_fabric][5].'

ShirtColor

これは私が行うためにマウスオーバーたいものです

okが、明らかに私はこれは私が右方向に任意の助けのために:)

<button onMouseOver="style.ShirtColor.fill = '.$s20[1][5].'

感謝を得たものです何をすべきか理解しません。

if ($s20[1][25] == "on"){ echo '<a href="/fabric-colors/fabric-color-on-a-style.html?fabric=s20&color='.$s20[1][0].'&style='.$_GET['style'].'"><button onMouseOver="ShirtColor.fill = '.$s20[1][5].'" onMouseOut="ShirtColor.fill = '.$fabric_selected[$line_fabric][5].'" type="button" data-original-title="('.$s20[1][0].') '.$s20[1][1].'" data-toggle="tooltip" data-placement="top" class="btn btn-info" style="width:20px; height:20px;background-color:'.$s20[1][5].';"></button></a> ';}

あなたのお手伝いはありますが、私は何を探しているのかわかりません。私は200 +ファブリックの色を持っていて、私は別の場所に書かれた別の機能を持ってほしくない。それは私の最後の例としてそれを持つことは可能ですか？どうして？ jQueryのを使用して

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 

 
<svg version="1.1" id="T01S" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5456 2376" xml:space="preserve" enable-background="new 0 0 5456 2376"> 
 
<style type="text/css">.Stiching{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:2.024,2.024,2.024,2.024,2.024,2.024;}.Lines{fill:none;stroke:#000000;stroke-width:8;stroke-miterlimit:10;}</style> 
 
<path class="ShirtColor" d="M2549.7 456l-184.8 432 -281.6-76.6c0 0-0.1-0.1-0.4-0.2v1413.1H552.2V811.4L270.9 888 86.1 456c0 0 553.1-272.1 553.1-272l390.3-56.7 0.3 0 63.3-28.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 390.7 56.7L2549.7 456z"/> 
 
<path class="ShirtColor" d="M5385.4 456l-184.8 432L4919 811.3c0 0-0.1-0.1-0.4-0.2v1413.1H3387.9V811.4L3106.6 888l-184.8-432 552.8-272 390.6-56.7 0.3 0 63.3-28.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 391.3 56.8L5385.4 456z"/><line class="Stiching" x1="552.2" y1="2161.8" x2="2083" y2="2161.8"/><line class="Stiching" x1="2083" y1="2174.1" x2="552.2" y2="2174.1"/><line class="Stiching" x1="2337.3" y1="880.4" x2="2520.4" y2="441.6"/><line class="Stiching" x1="2531.4" y1="447" x2="2348.8" y2="883.7"/><line class="Stiching" x1="302.6" y1="879.3" x2="118.8" y2="440"/><line class="Stiching" x1="107.8" y1="445.3" x2="290.6" y2="882.6"/> 
 
<path class="Stiching" d="M1534.8 180.6c-64.3 7.3-130.2 10.8-203 10.8 -82.5 0-161-5.1-232.2-14.4"/> 
 
<path class="Stiching" d="M1530.1 196.1c-63.2 6.4-127.9 9.5-198.3 9.5 -79.9 0-157.5-4.4-227.9-12.6"/> 
 
<path class="Stiching" d="M1608 127.5c-9.2 332.6-568 333.1-576.5 0"/> 
 
<path class="Stiching" d="M1624.3 129.9c-9.7 349.7-600.2 350.2-609.1-0.1"/><line class="Stiching" x1="3387.9" y1="2161.8" x2="4918.6" y2="2161.8"/><line class="Stiching" x1="4918.6" y1="2174.1" x2="3387.9" y2="2174.1"/><line class="Stiching" x1="5172.5" y1="880.3" x2="5356.2" y2="441.7"/><line class="Stiching" x1="5367" y1="447" x2="5184.6" y2="883.6"/><line class="Stiching" x1="3137.8" y1="879.5" x2="2954.2" y2="440.1"/><line class="Stiching" x1="2942.3" y1="445.9" x2="3126.4" y2="882.6"/> 
 
<path class="Stiching" d="M4443.6 127.5c-10.4 136.3-568.7 134.3-578.2-0.3"/> 
 
<path class="Lines" d="M1093.1 98.3c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8"/> 
 
<path class="Lines" d="M2549.7 456l-184.8 432c0 0-281.7-76.7-282-76.8 -10.4-5.1-237.6-122.5-86.3-627.1L2549.7 456z"/> 
 
<path class="Lines" d="M552.5 811.3L270.9 888 86.1 456l553.1-272C794 700.4 552.5 811.3 552.5 811.3z"/> 
 
<path class="Lines" d="M1615.2 128.6c-2.6 340-592.6 340.6-595.3 0"/> 
 
<path class="Lines" d="M1536.9 171c-64.6 7.8-133.2 11.8-207.1 11.8 -83.6 0-160.9-5.2-232.3-15"/> 
 
<path class="Lines" d="M1029.8 127.2l63.3-28.9c-3 61 12 98.5 13.2 101.1 33 74.3 115.2 126.9 211.3 126.9 95 0 177.3-51 210.1-124.3 16.7-37.4 14.7-101.8 14.2-104.7l64 30 390.7 56.8c-151.2 504.6 76 622.1 86.3 627.1v1413.1H552.2V811.4l0.3-0.1c0 0 241.5-111 86.7-627.4L1029.8 127.2z"/> 
 
<path class="Lines" d="M1527.7 202c-62.5 5.9-128.9 9.1-197.9 9.1 -78.5 0-153.8-4.1-223.6-11.7"/> 
 
<path class="Lines" d="M5385.4 456l-184.8 432 -18.4-5 -12-3.3L4919 811.3c0 0-0.1-0.1-0.4-0.2 -10.4-5.1-237.6-122.5-86.3-627.1l0.6 0.1 520.9 256.3 11.1 5.5L5385.4 456z"/> 
 
<path class="Lines" d="M3388.2 811.3l-0.3 0.1L3137 879.7l-12 3.3 -18.4 5 -184.8-432 20.6-10.1 11-5.4L3474.6 184h0l0.3 0C3629.7 700.4 3388.2 811.3 3388.2 811.3z"/> 
 
<path class="Lines" d="M4450.9 128.6c-2.9 147.3-592.3 146.6-595.2 0"/> 
 
<path class="Lines" d="M3928.8 98.3c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 390.7 56.8c-151.2 504.6 76 622.1 86.3 627.1v1413.1H3387.9V811.4l0.3-0.1c0 0 241.5-111 86.7-627.4l390.6-56.7L3928.8 98.3z"/> 
 
</svg> 
 

 
<style type="text/css"> 
 
.ShirtColor{fill:#F8F3CE;} 
 
</style> 
 

 
<script> 
 
function ShirtColorChange(bg) {this.ShirtColor.style.fill = bg;} 
 
</script> 
 
<button class="btn btn-info" data-original-title="(2001) White" data-placement="top" data-toggle="tooltip" onmouseout="ShirtColor.fill = #F8F3CE" onmouseover="ShirtColorChange.fill = #FFFFFF" style="width:20px; height:20px;background-color:#FFFFFF;" type="button"></button> 
 
<button class="btn btn-info" data-original-title="(2001) White" data-placement="top" data-toggle="tooltip" onmouseout="ShirtColorChange(#F8F3CE)" onmouseover="ShirtColorChange(this.style.fill)" style="#FFFFFF; width:20px; height:20px;background-color:#FFFFFF;" type="button"></button> 
 

 
</body> 
 
</html>

出典

2017-07-22 user1296114

通常、cssクラス：ホバーは、ホバーアクションを検出するために使用されます。私はこのリンクが答えを持っていると信じています。http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs – xxLITxx

私はここにどんなPHPも見ません。たぶん '$ s20 [1] [5]'のためであるかもしれませんが、これは実際には "PHP"に関連する質問にはなりません。編集：phpタグは編集で削除されましたhttps://stackoverflow.com/revisions/45256554/2 –

私のPHPコードも表示するように編集しています。 – user1296114

ます（上の2つの異なるにフックすることができます）イベント：のMouseEnterとmouseleave：

$("#var1").on("mouseenter", function() { 
    // do your things; 
}); 

$("#var1").on("mouseleave", function() { 
    // do other things; 
});

出典

2017-07-22 16:11:52 Reza

使用CSSやクラス：

を合わせます

ShirtColor:hover { 
    fill: blue; 
}

出典

2017-07-22 16:12:26 xxLITxx

JavascriptまたはJQueryを使用する必要があると思います。 JavaScriptでは、あなたはこのような何か試すことができます：jQueryので

var button = document.querySelector('button'); //Select your button with hover behavior 
button.addEventListener('mouseover', function(e) { // Add hover event in 
    this.style.fill.ShirtColor = 'your color'; 
}); 
button.addEventListener('mouseout', function(e) { // Add hover event out 
    this.style.fill.ShirtColor = 'your original color'; 
});

を（あなたのファイルにJQuery.jsを追加し、あなたのhtmlコードでそれを参照することを忘れないでください）似ています

$('button').mouseover(function() { 
    $(this).css('fill','your color'); 
}); 

$('button').mouseout(function() { 
    $(this).css('fill','your original color'); 
});

はそれが役に立てば幸い。

出典

2017-07-22 16:19:18 Arrabidas92

jQueryのは、PHP上でマウスの

答えて

関連する問題