Question

我使用div标签创建了一个按钮。它实际上不是一个按钮，但它看起来像一个按钮。在这里，我想将h3标签的内容更改为“＆gt;”鼠标悬停在它上面时的这个符号。怎么做？

我在javascript中编写代码来更改h3内容但它不会显示任何效果？我不知道为什么？

function change-content() {
  document.getElementById('button-name').innerHTML = ">";
}

body {
  background-color: #6badf6;
}
#button-layout {
  background-color: #3b81cf;
  width: 100px;
  height: 40px;
  border-radius: 10px;
  margin-left: 50%;
  margin-top: 25%;
}
#button-name {
  font-family: verdana;
  font-size: 14px;
  color: white;
  padding-left: 22px;
  padding-top: 11px;
}
#button-name:hover {
  cursor: pointer;
}

<html>

<body>
  <div id="button-layout">
    <h3 id="button-name" onmouseover="change-content()">Submit</h3>
  </div>
</body>

</html>

Answer 1

您实际上可以使用纯CSS，不需要JS，通过向包含正常和悬停状态所需文本的按钮添加属性，然后将:after伪的内容设置为show来实现这取决于:hover。

这也保持了明确的关注点分离，将内容保留在HTML和JS之外，这意味着如果您希望更改显示的值，您可以直接引用源标记。 / p>

body {
    background-color: #6badf6;
}
#button-layout {
    background-color: #3b81cf;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    margin-left: 50%;
    margin-top: 25%;
}
#button-name {
    font-family: verdana;
    text-align: center;
    font-size: 14px;
    color: white;
    padding-top: 11px;
}
#button-name:hover {
    cursor: pointer;
}
#button-name:after {
    content: attr(data-label);
}
#button-name:hover:after {
    content: attr(data-label-hover);
}

<div id="button-layout">
  <h3 id="button-name" data-label="Submit" data-label-hover=">"></h3>
</div>

关于您的代码目前无效的原因，这也是answered in this thread，即您的函数名称包含无效的-字符。

Answer 2

问题在函数声明中。定义函数与（_）类似函数change_content（）它将起作用

Answer 3

您的功能名称无效。解析器将其视为减法。

＆＃13;

e.stopPropagation

＆＃13;

Answer 4

更改您的函数名称，请参阅示例

changecontent()

鼠标悬停时H3标签内容不会改变

4 个答案: