Question

Essentially I want to be able to hover-over my links in a left vertical column and have a panel pop-out on the right. Here’s a screenshot of what I’m looking to achieve. Again, I’m a complete noob when it comes to JQuery, so if there’s a strictly css3 way to do this, I’m all ears.

http://flic.kr/p/cTsG9E

Answer 1

There is probably a way to do this with CSS3 transitions. These may not be supported by all browsers.

The easiest would be to use jQuery.

<a id="trigger-link">Hover Over Me</a>
. . . 
<div id="target" style="display: none">I should not be using inline styles</div>

Then in your JS:

$("#trigger-link").hover(function() {
    $("#target").show();
}, function() {
    $("#target").hide();
});

This is a very simple example. But it should be a good place to start.