分别更改div的内容

用户名

我正在尝试在悬停时在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希望更改的内容。但是正如您所看到的，当我将鼠标悬停在任何一个上时，两个的内容都会改变。

我做错什么了？

安吉·阿加瓦尔

您可以将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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。