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!

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

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

Answer 3

You'll want to use the onmouseover Event

http://www.w3schools.com/jsref/event_onmouseover.asp

And then have you script change the style of "content" to display inline, and then back to none when they leave the hover with onmouseout

Answer 4

You could use jQuery and register a hover event for every line in your list. In the event function you would be able to access the content of the hovered tag with $(this).text();

Answer 5

Are you looking for this http://jsfiddle.net/abhiklpm/v6ay0yy6/ In my example on mouseout it will display the old div content also, you can remove that part if needed. Also instead of hover you could use jquery events like mouseenter, mouseover etc

Answer 6

HTML

<ul>
    <li class="clickable" data-desc="bar and stuff">Fo</li>
    <li class="clickable" data-desc="a red fruit">apples</li>
    <li class="clickable" data-desc="thing you type with">keyboard</li>
    <li class="clickable" data-desc="floats on water">boat</li>
</ul>
<div id="content">Descriptions should appear here</div>

Javascript(jQuery Required)

$('.clickable').on('click', function () {
    desc = $(this).attr('data-desc'); //get the description
    $('#content').text(desc);
});

fiddle here http://jsfiddle.net/jcw6v7Le/