个人中心
gpt4 book ai didi

javascript - jQuery 在鼠标悬停在 php 上制作样式 css

转载 作者：行者123 更新时间：2023-11-28 03:20:08 25 4
gpt4 key购买 nike

晚上好!

所以我想在鼠标悬停在按钮上时更改 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>

最佳答案

使用 jQuery，您可以 Hook 两个不同的 on() 事件:mouseenter 和 mouseleave:

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

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

关于javascript - jQuery 在鼠标悬停在 php 上制作样式 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45256554/

25 4 0
文章推荐： html - 纯 CSS 视差内部滚动条问题
文章推荐： jquery - Bootstrap - 修复了没有其余栏的可折叠导航栏按钮
文章推荐： javascript - 如何停止浏览器用数据填充输入
文章推荐： html - Css 网格系统内联 block
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com