html - Star Rater 順不同リストの横に CSS を使用してホバー時にメッセージを表示する

Question

各星がホバーされたときに、星評価者の右側に固有のメッセージを表示しようとしています。ツールチップをいじりましたが、マウスに追従してしまいます。メッセージを修正してほしいです。CSSを使用しているように見えるYelpのコードを見てみました。JavaScript や JQuery を使用するのではなく、単純な CSS ソリューションを望んでいます。誰かが解決策やポインタを持っているなら、私はそれを感謝します. ありがとう。

これが私のコードです：

<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;
}   

Answer 1

display:blockホバーして使ってみてください。

.star-rating a:hover{display:block;}