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>