Question

I just created a star rating system that change image on mouse over., but i cant seem to display the stars inline. they get under each other. It dosent work with style sheet so I suppose it should be re written in the javascript. !?

这是我的 Java本功能。

html Code :

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

Java:

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

页: 1

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

}

the mouse over function is working great except that it wont display inline =/ Thanks

Answer 1

利用<条码>显示:星号上的将解决问题。你们可以在没有任何 Java字的情况下,利用中央安全局进行全方位的对冲效应。

Demo: http://jsfiddle.net/ThinkingStiff/5JPDX/

传真:

<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; or display:inline/2005/4;均为你的朋友,试图在直线展示。我用<条码>和代号;TABLE>赢得建议,但可以这样做。

或许你们应当把你的法典放在其他部分,或创建。

<>Update:

创立:。

仅以<条码>复制/剪辑你的超文本。添加的风格<代码> DIV ,以说明其如何在一行。

否则,你可能会想就你最外围的四级编码做出规定,并控制这种显示方式,即使用<条码>(SPAN,而不是<条码>DIV<>/条码>。

DIV解决方案。仅凭您目前的超文本使用:

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

Answer 3

You should use CSS property "display" not on parent DIV, but on child ones, because it cannot be inherited. So, do something like this in 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;}

或(经修改)宣布社会保障局的班级

友情链接