logo标签列表

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

javascripthtmlcss
3

我使用div标签创建了一个按钮。它实际上不是一个按钮，但看起来像一个按钮。在这里，当鼠标悬停在它上面时，我想将h3标签的内容更改为'>'这个符号。如何做到呢？

我用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>

4个回答
12

你可以使用纯CSS来实现这个功能，不需要使用JS，只需将文本所在的按钮添加属性，用于正常和悬停状态，然后根据:hover设置:after伪元素的内容以显示所需文本。

这还保持了关注点的明确分离，使内容保留在HTML中而不是JS中，这意味着如果你想要更改显示的值，只需直接引用源标记即可。

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>

关于为什么您的代码当前无法正常工作，这也在此线程中得到了回答，即，您的函数名包含无效的-字符。

1
问题出在函数声明上。像这样使用(_)定义函数，例如: function change_content()，这样就可以工作了。
0

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

changecontent()
0

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

<html>

<head>
  <style>
    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;
    }
  </style>
  <script>
    function changeContent() {
      document.getElementById('button-name').innerHTML = ">";
    }
  </script>
</head>

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

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接