Change div content based on mouse hover on different divs

Question

Hi this question is sort of building off of this previous question mouse hover changes text inside separate DIV asked by someone else.

Only I believe the original poster was asking for multiple hovers and no one seemed to understand the request.. I believe I'm looking for what he was looking for so i'll try to explain it best a I can.

say I have a div

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

and a list of links positioned anywhere else on the page with it's own descriptions (only the list is visible not the descriptions)

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

How would I make it so that if someone hovered over one of the links, the description would then be shown in the content div?

---

Thanks for all the replies! In the end, this is what I went with:

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

having a separate input for the description leaves me the option to movie it around if need be. Thanks again for all the great answers!

Solution 1

this solution uses pure 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>

Solution 2

I'll give you the simplest of answers and an example to show how easy this is:

Bootply

Html:

<div id="content">
  This is some cool default content!
</div>

<div id="foo">Bar and stuff</div>
<div id="apples">A red fruit</div>
<div id="keyboard">Thing you type with</div>
<div id="boat">Floats on water</div>

Javascript:

$("#foo, #apples, #keyboard, #boat").hover(function(e){
  $("#content").text($(this).text());
});

There's a lot more you need to do to make this a viable/useable webpage, but this will point you in the right direction.

Hope that helps.