2

当每颗星悬停时，我试图在我的星级评定者的右侧显示一条独特的信息。我弄乱了工具提示，但它们会跟随鼠标，我希望我的消息得到修复。我尝试查看 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;
}
4

2 回答 2

1

这是一个示例，它是如何工作的。使用“+” CSS 选择器。

http://jsfiddle.net/HADeS/

.five-stars:hover + .message{
display:block !important;
z-index:10;}
于 2013-05-15T07:38:57.290 回答
0

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

.star-rating a:hover{display:block;}
于 2013-05-15T07:15:01.177 回答