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;可以解决问题。您可以在没有任何Javascript的情况下使用CSS完成整个悬停效果。

演示：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 );

输出：

enter image description here

Answer 2

尝试以直线水平线显示时，

float:left; display:inline;或display:inline block;都是您的朋友。我不会建议使用<TABLE>，但可以这样做。

也许您应该发布更多代码或创建HTML / CSS / Javascript的JSFiddle

<强>更新

创建了这个：http://jsfiddle.net/Uyr4P/

这只是HTML的复制/粘贴，为display:inline-block添加了DIV样式，以说明它是如何在一行中完成的。

您可能希望在最外层的DIV上放置规则并以这种方式控制显示 - 或者，使用SPAN而不是DIV s

DIV解决方案。只需将其与您当前的HTML一起使用：

DIV#star DIV
{
 display:inline-block;
}

Answer 3

您应该在父DIV上使用CSS属性“display”，而在子视图上使用CSS属性，因为它不能被继承。所以，在CSS中做这样的事情：

#star_1{display:inline block;}
#star_2{display:inline block;}
#star_3{display:inline block;}
#star_4{display:inline block;}
#star_5{display:inline block;}

或（更好）为它声明CSS类

显示内联DIV

3 个答案: