Question

我有什么：

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

我想做什么：

当用户悬停编号框时，文本会在div元素内动态更改，具体取决于正在悬停的框。

示例：

如果用户将鼠标悬停在方框1上，则div元素内的文字会显示＆＃34; Hello＆＃34;

如果用户将鼠标悬停在Box 2上，则div元素内的文本（与之前相同）表示＆＃34; World＆＃34;

编辑：如果用户点击按钮，我最接近的是文字更改：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与某种事件监听器结合使用？对不起，我对此完全陌生。：（

Answer 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。

Answer 2

如何使用onmouseover，那不是jQuery。

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

2 个答案: