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的内容，{strong}，而我只想{strong>更改}悬停它。但是正如您所看到的，当我将鼠标悬停在任何一个上时，两者的内容都会发生变化。

我做错了什么？

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>

Answer 2

如何将元素作为函数的参数传递？

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

“ this”是指当前元素，这样您就可以选择要显示的内容

Answer 3

让我们看一下您的hover()函数：

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

这将用给定的内容填充两个

Answer 4

您的所有div应该与此类似：

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

然后您可以使用jQuery

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

由于某种原因，如果您不想使用jQuery，那么我无能为力，因为我不是普通javascript专家，但是我敢肯定，您可以弄清楚上面代码的javascript。

分别更改div的内容

4 个答案: