Javascript 当我将鼠标悬停在按钮上时，如何更改div的文本？_Javascript_Html_Css_Hover

Javascript 当我将鼠标悬停在按钮上时，如何更改div的文本？

javascript html css

Javascript 当我将鼠标悬停在按钮上时，如何更改div的文本？,javascript,html,css,hover,Javascript,Html,Css,Hover,我所拥有的： 8个编号的盒子排成一行。我不允许使用jQuery 我想做的是：当用户将数字框悬停时，div元素内的文本会根据悬停在哪个框上而动态变化例如：如果用户将鼠标悬停在框1上，div元素中的文本将显示Hello 如果用户将鼠标悬停在框2上，div元素内的文本与前面相同，表示World 编辑：如果用户单击某个按钮，则我拥有的最接近文本更改：我应该将.onMouseEvent与某种事件侦听器结合使用吗？对不起，我对这个完全陌生根据OP的请求进行编辑，以根据其他框的悬停更改单个框的内容

我所拥有的：

8个编号的盒子排成一行。我不允许使用jQuery

我想做的是：

当用户将数字框悬停时，div元素内的文本会根据悬停在哪个框上而动态变化

例如：

如果用户将鼠标悬停在框1上，div元素中的文本将显示Hello

如果用户将鼠标悬停在框2上，div元素内的文本与前面相同，表示World

编辑：如果用户单击某个按钮，则我拥有的最接近文本更改：

我应该将.onMouseEvent与某种事件侦听器结合使用吗？对不起，我对这个完全陌生

根据OP的请求进行编辑，以根据其他框的悬停更改单个框的内容。使用通用同级组合器，我们可以在框悬停时选择带有类结果的div

HTML

使用。

使用onmouseover怎么样，那不是jQuery。

你能发布一些你的代码吗？这会让事情变得更简单。你想让我们为你编写代码吗？为mouseenter和mouseleave事件编写处理程序。我真的什么都没有——我不知道怎么做。最接近我的是这个，文本通过点击改变：为什么不允许使用javascript？你要么为“ft.com”这样的公司工作，他们回避在那里的组件生态系统中使用“上帝对象”，要么这是一个学校项目。我猜是学校项目。将您的问题重新表述为：当我将鼠标悬停在按钮上时，如何更改div的文本，然后使用该答案为您的问题创建完整的解决方案。我想他希望他们都将消息放在同一个div中，而不是放在您悬停的div中。@Barmar我不同意，如果用户将鼠标悬停在框1中，它会说Hello，等等…div元素内的文本变化取决于悬停在哪个框上，这又如何呢？它指的是一个div元素，而不是悬停的框。对不起，我为你们澄清了-同一个div中的文本根据悬停在哪个框上而动态变化。这有帮助吗？使用内容并不是为了实际内容，它应该只用于样式设置，并与伪元素结合使用。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BluePad</title>
  <style type="text/css">
    #button1 {
      background-color:red;
      display:inline-block;
    }
    #button2 {
      background-color:green;
      display:inline-block;
    }
  </style>
</head>
<body>
  <div id="button1">
    Click 1
  </div>
  <div id="button2">
    Click 2
  </div>
  <div id="textResults">
    Click on a button to change text
  </div>

  <script>
    // when #button1 is clicked...
    document.getElementById("button1").addEventListener("click", function(e) {
      // change text of #textResults
      document.getElementById("textResults").innerHTML ="Hello World";
    });

    // when #button2 is clicked...
    document.getElementById("button2").addEventListener("click", function(e) {
      // change text of #textResults
      document.getElementById("textResults").innerHTML ="Just Clicked #button2";
    });

  </script>
</body>
</html>

<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>

    <div class="results"></div>
</div>

.box1, .box2 { display: inline-block; width: 100px; height: 100px; background: #ccc; }

.results {
    width: 250px;
    height: 100px;
    background: #ccc;
    margin-top: 4px;
}

.box1:hover ~ div.results:before {
    cursor: pointer;
    content: "Hello";
}

.box2:hover ~ div.results:before {
    cursor: pointer;
    content: "World";
}