将鼠标悬停在按钮上时如何更改 div 的文本？
Posted
技术标签:
【中文标题】将鼠标悬停在按钮上时如何更改 div 的文本？【英文标题】：How do I change the text of a div when I hover over a button? 【发布时间】：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 的文本”，然后使用该答案为您的问题创建完整的解决方案。
【参考方案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。
【讨论】：
以上是关于将鼠标悬停在按钮上时如何更改 div 的文本？的主要内容，如果未能解决你的问题，请参考以下文章