Question

晚上好！..

所以我希望鼠标悬停在一个按钮上的是改变SVG图层上的颜色，并调用样式填充颜色.ShirtColor

这就是我想在鼠标上做的事情：

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

鼠标出现：

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

好吧显然我不明白该怎么做所以这就是我得到的:)。

<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多种面料颜色，我不希望它有一个单独的功能写在别的地方。是不是可以把它作为我的最后一个例子？为什么不呢？

<!DOCTYPE html>
<html>
<head>
	<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>

Answer 1

使用jQuery可以挂钩两个不同的 on（）事件： mouseenter 和 mouseleave ：

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

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

Answer 2

使用css和class：hover

ShirtColor:hover {
  fill: blue;
}

Answer 3

我认为你必须使用Javascript或JQuery。在javascript中，你可以尝试这样的事情：

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中类似（记得在你的文件中添加JQuery.js并在你的html代码中引用它）：

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

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

希望它有所帮助。

jQuery使用鼠标在php上制作样式css

3 个答案: