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

-6

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

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

我想做什么：

当用户将鼠标悬停一个信箱号码，文本，这取决于正在徘徊在框中div元素内动态变化。

实施例：

如果用户悬停在框1中，div元素中的文本说“你好”

如果用户悬停在框2中，div元素中的文本（和以前一样）说，“世界”

编辑：我最近是文本改变，如果一个用户点击按钮：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与某种事件侦听器结合使用？对不起，我完全不熟悉这一点。 :(

来源

2014-06-17 Ochre

你可以发布你的代码的小提琴吗？这将使它更容易。 – Shahar

你想让我们为你编码吗？ – LcSalazar

为'mouseenter'和'mouseleave'事件编写处理程序。 – Barmar

编辑，以适应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。

来源

2014-06-17 15:39:15 Michael

我想他希望他们都把信息放在同一个DIV中，而不是你徘徊的DIV。 – Barmar

@Barmar我不同意，“如果用户盘旋box1”IT“说你好，等等......” – Michael

那么“div元素内的文本更改取决于哪个盒子正在盘旋”呢？ “IT”是指“一个div元素”，而不是盒子悬停。 – Barmar

如何使用onmouseover，这不是jQuery。

来源

2014-06-17 15:40:36 drjimmie1976

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

回答

相关问题