Display message on hover using CSS next to Star Rater unordered list

Question

I am trying to show a unique message to the right of my star rater when each star is hovered over. I messed around with tooltips but they would follow the mouse, I want my message to be fixed. I tried looking at Yelp's code which looks like they are using CSS. I am hoping for a simple CSS solution, rather than using JavaScript or JQuery. If anyone has a solution or pointer I would appreciate it. Thanks.

Here is my code:

<ul class="star-rating">
<li class="current-rating" style="width:'.$average_rating.';"></li>
<li><a href="#" title="1" class="one-star tooltip" onclick="updateStarRating(this.title)">1</a>
<p class="message">Terrible!</p>
</li>
<li><a href="#" title="2" class="two-stars tooltip" onclick="updateStarRating(this.title)">2</a>
<p class="message">Not good!</p></li>
<li><a href="#" title="3" class="three-stars" onclick="updateStarRating(this.title)">3</a>
<p class="message">Pretty good.</p></li>
<li><a href="#" title="4" class="four-stars" onclick="updateStarRating(this.title)">4</a>
<p class="message">Almost perfect!</p></li>
<li><a href="#" title="5" class="five-stars" onclick="updateStarRating(this.title)">5</a>
<p class="message">Perfect!</p></li>
</ul>

.star-rating ul li div{display:none; background:white; opacity:.5; position:absolute;}

.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url(../images/star_01_white.png) left -1000px repeat-x;
}
.star-rating{
position:relative;
width:110px;
height:19px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a, 
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:19px;
line-height:19px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
    background-position: left bottom;
}
.star-rating a.one-star{
    width:20%;
    z-index:6;
}
.star-rating a.two-stars{
    width:40%;
    z-index:5;
}
.star-rating a.three-stars{
    width:60%;
    z-index:4;
}
.star-rating a.four-stars{
    width:80%;
    z-index:3;
}
.star-rating a.five-stars{
    width:100%;
    z-index:2;
}
.star-rating .current-rating{
    z-index:1;
    background-position: left center;
}   

Solution

Here is an example how it works. Using "+" CSS Selector.

http://jsfiddle.net/HADeS/

.five-stars:hover + .message{
display:block !important;
z-index:10;}