javascript - 根据鼠标悬停在不同的 div 上更改 div 内容

Question

您好，这个问题是在上一个问题的基础上构建的 mouse hover changes text inside separate DIV别人问的。

只有我相信原始发布者要求多次悬停并且似乎没有人理解该请求。我相信我正在寻找他正在寻找的东西所以我会尽力解释它。

说我有一个div

<div id="content">Descriptions should appear here</div>

以及位于页面其他任何位置的链接列表及其自己的描述(只有列表可见而不是描述)

foo = bar and stuff
apples = a red fruit
keyboard = thing you type with
boat = floats on water

我该如何做到，如果有人将鼠标悬停在其中一个链接上，那么描述就会显示在内容 div 中？

---

感谢大家的回复!最后，这就是我的选择:

JavaScript:

<script>
    function changeContent(description) {
        console.log(description);
        var MyDesc = document.getElementById(description);
        document.getElementById('content').innerHTML = MyDesc.value;
    }
</script>

html:

<div id="content"></div>

<a onmouseover="changeContent('desc1')" href="#">Apples</a>
  <input type="hidden" id="desc1" value="apples are delicious">
<a onmouseover="changeContent('desc2')" href="#">Oranges</a>
  <input type="hidden" id="desc2" value="Oranges are healthy">
<a onmouseover="changeContent('desc3')" href="#">Candy</a>
  <input type="hidden" id="desc3" value="Candy is tasty!">

有一个单独的描述输入让我可以选择在需要时拍摄它。再次感谢所有出色的回答!

Answer 1

此解决方案使用纯 javascript。

<div id="content">
    Stuff should be placed here.
</div>

<br/>
<br/>
<br/>
<ul>
    <li onmouseover="hover('Apples are delicious')">Apple</li>
    <li onmouseover="hover('oranges are healthy')">Orange</li>
    <li onmouseover="hover('Candy is the best')">Candy</li>
</ul>

<script>
    function hover(description) {
        console.log(description);
        document.getElementById('content').innerHTML = description;
    }
</script>