javascript mouseout事件處理程序功能不起作用

Question

這是我在網頁上嘗試的功能。

我希望第二個按鈕在鼠標指針位於其上時更改背景顏色（黑色），並在其離開時更改為原始顏色（紅色）。 我以按鈕為例，但是如果您注意到的很好，該按鈕是由svg代碼制成的，它還有其他用途。

我能夠實現第一步（inhover函數），但是我的代碼（outhover函數）不起作用。

我在哪里錯了？

碼：

---

 function showbut(btndiv, fillcolormask, fillcolortext, btntxt) { document.getElementById(btndiv).innerHTML = btntxt; var btndivv = document.getElementById(btndiv).innerHTML; var btndivvcpy = btndivv; var idx = btndivv.replace(/\\<br\\>/g, "*"); var idxArr = idx.split("*"); var idxArrlen = idxArr.length; var offset = document.getElementById(btndiv).offsetWidth; var wdth = parseInt(offset + 36); var hght = 30; for (var i = 0; i < idx.length; i++) { var chrt = idx.substring(i, i + 1); //alert(chrt); if (chrt === "*") { hght = hght + 20; } } var bouton = "<svg width='" + wdth + "px' height='" + hght + "px' viewBox='0 0 " + wdth + " " + hght + "' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>"; bouton = bouton + "<title>un bouton</title>"; //alert(bouton); bouton = bouton + "<desc>Created with Sketch.</desc>"; bouton = bouton + "<defs>"; bouton = bouton + " <rect id='path-1" + btndivv + "' x='0' y='0' width='" + wdth + "' height='" + hght + "' rx='15'></rect>"; bouton = bouton + "</defs>"; bouton = bouton + "<g id='Page-1" + btndivv + "' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>"; bouton = bouton + " <g id='" + btndivv + "'>"; bouton = bouton + " <mask id='mask-2" + btndivv + "' fill='white'>"; bouton = bouton + " <use xlink:href='#path-1" + btndivv + "'></use>"; bouton = bouton + " </mask>"; bouton = bouton + " <use id='Mask" + btndivv + "' fill='" + fillcolormask + "' xlink:href='#path-1" + btndivv + "'></use>"; bouton = bouton + " <text mask='url(#mask-2" + btndivv + ")' font-family='Helvetica-Bold, Helvetica' font-size='13' font-weight='bold' fill='" + fillcolortext + "'>"; bouton = bouton + " <tspan x='18' y='18'>" + idxArr[0] + "</tspan>"; var y = 18; for (var i = 1; i < idxArrlen; i++) { var y = y + 18; bouton = bouton + " <tspan x='18' y='" + y + "' >" + idxArr[i] + "</tspan>"; offset = idxArr[i].length; } bouton = bouton + " </text>"; bouton = bouton + " </g>"; bouton = bouton + " </g>"; bouton = bouton + "</svg>"; document.getElementById(btndiv).innerHTML = bouton; return false; } var btdiv1txt = "un bouton"; var btdiv2txt = "un bouton de la rue"; var btdiv3txt = "un bouton de la rue un peu <br> lourdement siture <br> au niveau de la taille. <br>poincarre a vu son prix se delabrer jusqu'a devenir poussiere"; document.getElementById("btdiv2").addEventListener("mouseout", outhover, false); document.getElementById("btdiv2").addEventListener("mouseover", inhover, false); var a = showbut("btdiv1", "#D8D8D8", "#D0011B", btdiv1txt); var b = showbut("btdiv2", "#D7073F", "#FFFFFF", btdiv2txt); var c = showbut("btdiv3", "#D8D8D8", "#D0011B", btdiv3txt); function inhover() { var btdiv22txt = btdiv2txt; var k = showbut("btdiv2", "#000000", "#FFFFFF", btdiv22txt); return false; } function outhover() { var y = showbut("btdiv2", "#D7073F", "#FFFFFF", btdiv2txt); return false; } 

 <table> <tr> <td><span id="btdiv1"></span></td> </tr> </table> <p>&nbsp;</p> <p>&nbsp;</p> <table> <tr> <td><span id="btdiv2"></span></td> </tr> </table> <p>&nbsp;</p> <p>&nbsp;</p> <table> <tr> <td><span id="btdiv3"></span></td> </tr> </table> 

Answer 1

您可以在CSS中而不是在javascript中設置樣式嗎？ 如果是這樣，它應該像執行以下操作一樣簡單：

 #btn2{ background-color:black; color:white } #btn2:hover{ background-color: red; } 

 <button id="btn2"> Button 2 </button>