javascript - 单独更改div的内容

Question

我试图在悬停时在我的 div 中添加一些内容，但不是 CSS 方式。

function hover(description){
  console.log(description);
  document.getElementById('first-item').innerHTML = description;
  document.getElementById('second-item').innerHTML = description;
}

.slide {
  background: blue;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
}

<?php
  $content = "some text";
?>

<div>
  <div>
    <div class="slide" id="first-item" onmouseover="hover('<?php echo $content; ?>')" onmouseout="hover('')"></div>
    <div class="slide" id="second-item" onmouseover="hover('<?php echo $content; ?>')" onmouseout="hover('')"></div>
    <div class="slide" id="third-item"></div>
  </div>
</div>

我希望仅 .first-item 的内容在我将其悬停时发生变化并且仅 的内容.second-item 当我悬停它时改变。但正如您所见，当我悬停其中一个时，两者的内容都会发生变化。

我做错了什么？

Answer 1

您可以将 this 作为鼠标移入和鼠标移出的 hover 函数中的元素引用传递，这样您就可以在 JavaScript 中使用此引用来设置 该特定元素的 innerHTML:

function hover(elem, description) {
  elem.innerHTML = description;
}

.slide {
  background: blue;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
}

<div>
    <div>
      <div class="slide" id="first-item" onmouseover="hover(this, 'sampleText')" onmouseout="hover(this, '')"></div>
      <div class="slide" id="second-item" onmouseover="hover(this, 'sampleText')" onmouseout="hover(this, '')"></div>
      <div class="slide" id="third-item" onmouseover="hover(this, 'sampleText')" onmouseout="hover(this, '')"></div>
    </div>
  </div>