5 başlangıç ben bu sitede örneği izlemeye çalışıyorum

derecelendirme sistemi: (yerine tıklayın edememek: Aşağıdaki alıyorum örnekte olduğu gibi Ancak http://codepen.io/rogie/pen/jgrIu 5 başlangıç ben bu sitede örneği izlemeye çalışıyorum

yerine istenilen sonucu elde başlangıç, in Ben gerçekten yeniyim başlangıç ve baştan üst tıklanabilir çek)

enter image description here

olsun ve herhangi bir yardım bekleriz.

İşte

<html> 
<head> 
<style> 
.star-rating{ 
    font-size:0; 
    white-space:nowrap; 
    display:inline-block; 
    width:250px; 
    height:50px; 
    overflow:hidden; 
    position:relative; 
    background: 
     url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
    i{ 
opacity: 0; 
position: absolute; 
left: 0; 
top: 0; 
height: 100%; 
width: 20%; 
z-index: 1; 
background: 
     url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
background-size: contain; 
    } 
    input{ 
-moz-appearance:none; 
-webkit-appearance:none; 
opacity: 0; 
display:inline-block; 
width: 20%; 
height: 100%; 
margin:0; 
padding:0; 
z-index: 2; 
position: relative; 
&:hover + i, 
&:checked + i{ 
    opacity:1;  
} 
    } 
    i ~ i{ 
    width: 40%; 
    } 
    i ~ i ~ i{ 
width: 60%; 
    } 
    i ~ i ~ i ~ i{ 
width: 80%; 
    } 
    i ~ i ~ i ~ i ~ i{ 
width: 100%; 
    } 
} 


//just styling for the number 
.choice{ 
    position: fixed; 
    top: 0; 
    left:0; 
    right:0; 
    text-align: center; 
    padding: 20px; 
    display:block; 
} 

//reset, center n shiz (don't mind this stuff) 
*, ::after, ::before{ 
    height: 100%; 
    padding:0; 
    margin:0; 
    box-sizing: border-box; 
    text-align: center; 
    vertical-align: middle; 
} 
body{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
    Helvetica, Arial, "Lucida Grande", sans-serif; 
    &::before{ 
height: 100%; 
content:''; 
width:0; 
background:red; 
vertical-align: middle; 
display:inline-block; 
    } 
} 
</style> 

<!-- js --> 
<script src="/js/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0 /jquery.min.js"></script> 
<script type="text/javascript" src="/js/rating.js"></script> 

</head> 

<body> 

<span class="star-rating"> 
    <input type="radio" name="rating" value="1"><i></i> 
    <input type="radio" name="rating" value="2"><i></i> 
    <input type="radio" name="rating" value="3"><i></i> 
    <input type="radio" name="rating" value="4"><i></i> 
    <input type="radio" name="rating" value="5"><i></i> 
</span> 
<strong class="choice">Choose a rating</strong> 

</body> 
</html>

Eğer kullanımlarını LESS başvuran JS kodunun

$(':radio').change(
function(){ 
$('.choice').text(this.value + ' stars'); 
} 
)

kaynak

2016-03-26 S. Martin

örnektir:

TEŞEKKÜRLER

Aşağıdaki kod ile html dosyası oluşturdu. Düzenli bir css içine derlemediğiniz sürece, bir web tarayıcısında çalışmayacaktır. Bu gibi:

.star-rating { 
    font-size: 0; 
    white-space: nowrap; 
    display: inline-block; 
    width: 250px; 
    height: 50px; 
    overflow: hidden; 
    position: relative; 
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
} 
.star-rating i { 
    opacity: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 20%; 
    z-index: 1; 
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
} 
.star-rating input { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    opacity: 0; 
    display: inline-block; 
    width: 20%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    z-index: 2; 
    position: relative; 
} 
.star-rating input:hover + i, 
.star-rating input:checked + i { 
    opacity: 1; 
} 
.star-rating i ~ i { 
    width: 40%; 
} 
.star-rating i ~ i ~ i { 
    width: 60%; 
} 
.star-rating i ~ i ~ i ~ i { 
    width: 80%; 
} 
.star-rating i ~ i ~ i ~ i ~ i { 
    width: 100%; 
} 
.choice { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    padding: 20px; 
    display: block; 
} 
*, 
::after, 
::before { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
    text-align: center; 
    vertical-align: middle; 
} 
body { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
} 
body::before { 
    height: 100%; 
    content: ''; 
    width: 0; 
    background: red; 
    vertical-align: middle; 
    display: inline-block; 
}

kaynak

2016-03-26 01:33:29 David784

Teşekkür ederim !!!! Şuan çalışıyor. Cehaletim için özür dilerim, ancak neyin az olduğunu bile bilmiyorum. CSS'de olduğunu düşündüm, aslında bu örnekte –

@S. Martin: Kod profili bağlantınızın CSS bölümünün en üstünde bakarsanız, "CSS (LESS)" ifadesini görürsünüz. "View Derlenmiş" yazan bir düğme de var. Bu düğmeye tıkladığınızda, muhtemelen isteyeceğiniz şey CSS'yi verecektir. – David784

5 başlangıç ​​ben bu sitede örneği izlemeye çalışıyorum

cevap

İlgili konular

5 başlangıç ben bu sitede örneği izlemeye çalışıyorum