Jquery Hover Take Title Attribute and Display Div

Question

After tinkering with this for hours I am hoping someone can shed some insight on this.

I have 2 divs side by side. On the right side there is a list of links with the containing div id=list. On the left side there the viewarea div that will display a picture and description of the link on hover. So When you hover over a link it should display a div on the left side that is specific for that div. However, I want to add a bit of automation to this.

Basically on hover over a link in the list div, will toggle the display of the div on the left to display block. The hidden div id that will display the picture and description are named the same as the title attribute of the link in the list div. So on hover the link should then toggle the display of a div with the id equal to the title to display: block.

So Basically my scripts logic would be something like this:

On hover over link in list div. Get title attribute for this link. Change div with id equal to the title attribute gotten above (in #viewarea) to display block.

so when hovering over the monkeys link it will take the title “monkeys” and toggle the visibility of the div id=”monkeys” in the viewarea div.

Here is rough html/css code:

#list {
width: 480px;
float: right;
}

#viewarea {
width: 480px;
}

<div id="list">

<h1>
Animals
</h1>
<p>
<a href="monkeys_link"  title="monkeys">Monkeys</a>
</p>
<p>
<a href=”kittens_link" title="kittens">Kittens</a>
</p>
<p>
<a href="pigs_link" title="pigs">Pigs</a>
</p>

</div>

<div id="viewarea">

<div id="monkeys" style="display: none;">
<img src="picture_of_monkeys.jpg"></img>
Summary text
</div>

<div id="kittens" style="display: none;">
<img src="picture_of_kittens.jpg"></img>
Summary text
</div>

<div id="pigs" style="display: none;">
<img src="picture_of_pigs.jpg"></img>
Summary text
</div>

</div>

This is what i ended up for the external jquery script. I know I need some sort of looping construct like .each but I have not been able to get it working. Am I on the right track?

$(document).ready(function() {

var title1 = $("#list a").attr("title");


$("#list a").hover(
function () {
$("#" + "title1").css("display", "block");
},
function () {
$("#" + "title1").css("display", "none");
}
);

});

Sorry for the lengthy post, thanks so much.

Answer 1

$("#list")
  // On mouseenter and mouseleave, we want to react
  .on("mouseenter mouseleave", "a", function(e){
    // Find the element whose id matches our current title
    var el = $("#" + this.title);
    // Determine if we're entering or exiting the link
    switch ( e.type ) {
      // Show the element or hide the element
      case "mouseenter" : el.show(); break;
      case "mouseleave" : el.hide();
    }
  });

Demo: http://jsbin.com/amitet/2/edit