Question

当每颗恒星盘旋时，我试图在我的明星评估者的右侧显示一条独特的信息。我用工具提示搞砸了，但他们会跟着鼠标，我希望我的信息得到修复。我试着查看Yelp的代码，看起来他们正在使用CSS。我希望有一个简单的CSS解决方案，而不是使用JavaScript或JQuery。如果有人有解决方案或指针我会很感激。感谢。

这是我的代码：

<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

这是一个如何运作的例子。使用“+”CSS选择器。

http://jsfiddle.net/HADeS/

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

Answer 2

尝试在悬停时使用display:block。

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

使用CSS在Star Rater无序列表旁边显示消息

2 个答案: