javascript - 显示内联 DIV

Question

我刚刚创建了一个星级评分系统，可以在鼠标悬停时更改图像。但我似乎无法显示内嵌的星星。他们互相帮助。它不能与样式表一起使用，所以我想它应该用 javascript 重新编写。 !？

这是我的 JavaScript 函数。

html代码:

<div id="star">
<div id="star_1" onclick="SendRating(1);" onmouseover="rateStar(1)" >
<img src="star2.png" id="rating_1" onclick="SendRating(this.getAttribute('score'));" alt="star_1" /></div>
<div id="star_2" onclick="SendRating(2);" onmouseover="rateStar(2)" >
<img src="star2.png" id="rating_2" onclick="SendRating(this.getAttribute('score'));" alt="star_2" /></div>
<div id="star_3" onclick="SendRating(3);" onmouseover="rateStar(3)" >
<img src="star2.png" id="rating_3" onclick="SendRating(this.getAttribute('score'));" alt="star_3" /></div>
<div id="star_4" onclick="SendRating(4);" onmouseover="rateStar(4)" >
<img src="star2.png"  id="rating_4" onclick="SendRating(this.getAttribute('score'));" alt="star_4" /></div>
<div id="star_5" onclick="SendRating(5);" onmouseover="rateStar(5)" >
<img src="star2.png"  id="rating_5" onclick="SendRating(this.getAttribute('score'));" alt="star_5" /></div>


<p id="ContentHolder">

</p>
</div>

JavaScript:

function rateStar(rating){
        var i = 1;
        var ratings = '';
        for (i==1; i<=5; i++){
            if (i<=rating){
                document.getElementById('rating_'+i).src= 'star1.png';
            }
            else{
                document.getElementById('rating_'+i).src= 'star.jpg';
            }
        }
 }

还有我的一个div

<div id="star_1" onclick="SendRating(1);" onmouseover="rateStar(1)" >
<img src="star.jpg" id="rating_1" onclick="SendRating(this.getAttribute('score'));" alt="star_1" /></div>

CSS

#star{
position:absolute;
color:#fff;
margin-top:100px;
margin-left:1000px;
display:inline block;

}

鼠标悬停功能运行良好，但它不会内联显示 =/谢谢

Answer 1

在你的星星上使用 display: inline-block; 可以解决这个问题。您可以使用 CSS 完成整个悬停效果，而无需任何 Javascript。

演示:http://jsfiddle.net/ThinkingStiff/5JPDX/

HTML:

<div id="stars">
    <div id="star-1" class="star"></div>
    <div id="star-2" class="star"></div>
    <div id="star-3" class="star"></div>
    <div id="star-4" class="star"></div>
    <div id="star-5" class="star"></div>
</div>

CSS:

#stars {
    background-image: url( http://thinkingstiff.com/images/star-empty.gif );
    background-size: 20px 20px;
    cursor: pointer;
    height: 20px;
    overflow: hidden;
    position: relative;
    width: 100px;
}

.star {
    height: 20px;
    position: absolute;
    width: 100px;
}

.star:hover {
    background-image: url( http://thinkingstiff.com/images/star-highlight.png );
    background-size: 20px 20px;
}

#star-1 {
    right:  80px;
    z-index: 5;
}

#star-2 {
    right:  60px;    
    z-index: 4;
}

#star-3 {
    right:  40px;    
    z-index: 3;
}

#star-4 {
    right:  20px;    
    z-index: 2;
}

#star-5 {
    right:  0;    
    z-index: 1;
}

脚本:

document.getElementById( 'stars' ).addEventListener( 'click', function ( event ) {

    //SendRating( event.target.id.substr( -1 ) );
    alert( event.target.id.substr( -1 ) );

}, false );

输出: