分别更改div的内容

Question

I'm trying to add some content inside my divs on hover, but not the CSS way.

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>

I want only the content of the .first-item to change when I hover it and only the content of the .second-item to change when I hover it. But as you can see when I hover either one, the content of both changes.

What did I do wrong?

</div>

Answer 1

You can pass this as a element reference in hover function for both mouse in and mouse out so that you can then use this reference in JavaScript to set innerHTML of that particular element:

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>

</div>