将鼠标悬停在按钮上时如何更改 div 的文本？答案

【问题标题】：How do I change the text of a div when I hover over a button?将鼠标悬停在按钮上时如何更改 div 的文本？
【发布时间】：2014-08-07 17:01:06
【问题描述】：

我有什么：

连续 8 个编号的框。我不允许使用 jQuery。

我想做的事：

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

示例：

如果用户将鼠标悬停在框 1 上，则 div 元素内的文本会显示“Hello”

如果用户将鼠标悬停在框 2 上，则 div 元素内的文本（与之前相同）显示“World”

编辑：如果用户单击按钮，我最接近的是文本更改：http://jsfiddle.net/pVN2a/

<!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>

我是否应该将 .onMouseEvent 与某种事件侦听器结合使用？抱歉，我对此完全陌生。 :(

【问题讨论】：

你能贴出你的代码吗？这会让事情变得更容易。
您希望我们为您编码吗？
为mouseenter 和mouseleave 事件编写处理程序。
我真的什么都没有——我不知道该怎么做。我最接近的是这个，文本通过点击改变：jsfiddle.net/#&togetherjs=G1QBANLGOP
为什么不允许你使用javascript？你要么为像'ft.com'这样的公司工作，他们回避在组件生态系统中使用'上帝对象'，或者这是一个学校项目。学校项目是我的猜测。将您的问题改写为“当我将鼠标悬停在按钮上时如何更改 div 的文本”，然后使用该答案为您的问题创建完整的解决方案。

标签： javascript html css hover

【解决方案1】：

已编辑以适应 OP 的要求，即根据其他框的悬停来更改单个框的内容。使用通用兄弟组合器，我们可以在框悬停时选择具有类结果的 div。

JSFiddle Demo

HTML

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

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

CSS

.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";
}

使用General Sibling Combinator。

【讨论】：

我认为他希望他们都将消息放入同一个 DIV，而不是您悬停的 DIV。
@Barmar 我不同意，“如果用户将鼠标悬停在 box1 上，“IT”说你好，等等......”
“div 元素内的文本会根据悬停在哪个框上而发生变化”呢？ “IT”指的是“一个 div 元素”，而不是悬停的框。
对不起，我为你们澄清了 - 同一 div 内的文本会根据悬停在哪个框上而动态变化。这有帮助吗？
使用content 不适用于实际的内容，它只能用于样式化并与伪元素结合使用。

【解决方案2】：

用onmouseover怎么样，那不是jQuery。

【讨论】：