分别更改div的内容

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>

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>

What about passing an element as a parameter of the function?

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

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

<script>
    function hover(element, description) {
        console.log(description);
        element.innerHTML = description;
    }
</script>

The "this" refers to the current element, that way you are able to choose what will be displayed

</div>

Let's take a look at your hover() function:

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

This will fill both of the divs with with the given content, since you don't make a difference which div should be filled with content. However, you can pass this as an argument of your function, so you will always just modify the element you are currently hovering:

function hover(element, description) {
    console.log(description);
    element.innerHTML = description;
}

The you just have to change your HTML markup the following way:

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

All your divs should be similar to this:

<div class="slide" id="anything"></div>
<div class="slide" id="anythingElse"></div>

Then you can use jQuery

$('.slide').hover(function(){
    $(this).html('<?php echo $content; ?>');
}, function(){
    $(this).html('Previous Content'); //Change to previous content on mouse out if you want
});

For some reason if you don't want to use jQuery then I can't help much as I am not very expert in plain javascript, but I am sure you can figure out the javascript equivalent of the above code.