改变悬停时的星级
Change star rating on hover
我用下面的代码来显示星星:
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
</ul>
<ul class="rating">
<?php foreach ($this->getRatings() as $_rating): ?>
<li>
<span class="rowlabel"><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></span>
<span class="ratingSelector">
<?php foreach ($_rating->getOptions() as $_option): ?>
<input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>-<?php echo $_option->getValue() ?>-5" value="<?php echo $_option->getId() ?>" class="radio" /><label class="full" for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>-<?php echo $_option->getValue() ?>-5"></label>
<?php endforeach; ?>
</span>
</li>
<?php endforeach; ?>
</ul>
但是悬停和选择目前是从右向左工作的，但是我想把它从左向右改变。
代码是动态加载的，所以我不能改变排序并把值5放在第一位。此动态代码加载5次，用于5种不同的评级。
我怎样才能改变这个?或者我需要什么JQuery代码?
JSFiddle: https://jsfiddle.net/9nn14beq/
这几乎可以与纯CSS一起工作。它确实需要一行JavaScript来设置初始值:
document.getElementById('Degelijkheid-1-5').checked = true;.rating input {
display: none;
}
.rating label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content:"'f005";
}
li {
list-style:none;
}
.ratingSelector input + label {
color: #FFD700;
}
.ratingSelector input:checked ~ input:not(:checked) ~ label {
color: #ddd;
}
.ratingSelector input:checked ~ input:not(:checked) + label:hover ~ label {
color: #ddd;
}
.ratingSelector:hover input + label,
.ratingSelector:hover input:checked + label {
color: #FFED85;
}
.ratingSelector:hover input:checked ~ input:not(:checked) ~ label:hover,
.ratingSelector:hover input:checked ~ input:not(:checked) + label {
color: #FFD700;
}
.ratingSelector:hover input:checked ~ input:not(:checked) ~ label:hover ~ label {
color: #ddd !important;
}
.ratingSelector input + label:hover ~ label {
color: #ddd !important;
}<ul class="rating">
<li> <span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio"/>
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio"/>
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio"/>
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio"/>
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio"/>
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
</ul>编辑
使用JS(重新排序项目):
var objGroup = document.getElementsByClassName('ratingSelector');
for (var i = 0; i < objGroup.length; i++) {
var objRadio = [].slice.call(objGroup[i].getElementsByClassName('full')); // Create an array of items
for (var j = objRadio.length; j--;) { // Loop through the array backwards
var checkbox = document.getElementById(objRadio[j].getAttribute('for'));
objGroup[i].appendChild(checkbox);
objGroup[i].appendChild(objRadio[j]);
}
}.rating {
direction: rtl;
text-align: left;
}
.rating input {
display: none;
}
.rating label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "'f005";
}
li {
list-style: none;
}
.rating label {
color: #ddd;
}
/***** CSS to Highlight Stars on Hover *****/
.ratingSelector input:checked ~ label,
/* show gold star when clicked */
.ratingSelector label:hover,
/* hover current star */
.ratingSelector label:hover ~ label {
color: #FFD700;
}
/* hover previous stars in list */
.ratingSelector input:checked + label:hover,
/* hover current star when changing rating */
.ratingSelector input:checked ~ label:hover,
.ratingSelector label:hover ~ input:checked ~ label,
/* lighten current selection */
.ratingSelector input:checked ~ label:hover ~ label {
color: #FFED85;
}<ul class="rating">
<li> <span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio"/>
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio"/>
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio"/>
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio"/>
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio"/>
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
<li> <span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio"/>
<label class="full" for="Design-1-5"></label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio"/>
<label class="full" for="Design-2-5"></label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio"/>
<label class="full" for="Design-3-5"></label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio"/>
<label class="full" for="Design-4-5"></label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio"/>
<label class="full" for="Design-5-5"></label>
</span>
</li>
<li> <span class="ratingSelector">
<input type="radio" name="ratings[3]" id="Gebruiksgemak-1-5" value="1" class="radio"/>
<label class="full" for="Gebruiksgemak-1-5"></label>
<input type="radio" name="ratings[3]" id="Gebruiksgemak-2-5" value="2" class="radio"/>
<label class="full" for="Gebruiksgemak-2-5"></label>
<input type="radio" name="ratings[3]" id="Gebruiksgemak-3-5" value="3" class="radio"/>
<label class="full" for="Gebruiksgemak-3-5"></label>
<input type="radio" name="ratings[3]" id="Gebruiksgemak-4-5" value="4" class="radio"/>
<label class="full" for="Gebruiksgemak-4-5"></label>
<input type="radio" name="ratings[3]" id="Gebruiksgemak-5-5" value="5" class="radio"/>
<label class="full" for="Gebruiksgemak-5-5"></label>
</span>
</li>
</ul>您期望的事情是可能的，只有css。因为css规则适用于下一个兄弟而不是前一个。您还应该使用JQuery。
但是你可以使用以下技巧使用css:
.rating input { display: none; }
.rating label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "'f005";
}
li {list-style:none;
direction:rtl;
text-align: left;}
.rating label {
color: #ddd;
}
/***** CSS to Highlight Stars on Hover *****/
.rating input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) label:hover, /* hover current star */
.rating:not(:checked) label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating input:checked + label:hover, /* hover current star when changing rating */
.rating input:checked ~ label:hover,
.rating label:hover ~ input:checked ~ label, /* lighten current selection */
.rating input:checked ~ label:hover ~ label { color: #FFED85; } <ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
</span>
</li>
</ul>正如前面的答案所述，CSS选择器只以DOM的中性顺序工作。(尽管这可能在未来的某个时间改变)。
所以，如果你不能改变你的DOM，你需要反转你的CSS逻辑:
改变容器悬停的所有元素。然后使用同级选择器将元素更改到悬停项
的右侧.rating input { display: none; }
.rating label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "'f005";
}
li {list-style:none; }
/***** CSS to Highlight Stars on Hover *****/
.rating label {color: grey;}
label:hover { color: red; }
.ratingSelector:hover .full {color: red; }
.full:hover ~ .full { color: grey !important; } <ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
</ul>只需添加以下CSS代码，使其从左到右:
.ratingSelector {
max-width: 145px;
display: inline-block;
}
.rating label {
float: right;
}
相关文章：
- jQuery:当屏幕大小改变时，如何更改默认图像和悬停图像
- JavaScript:z-index 在第一次鼠标悬停后不会改变
- Jquery:图像获胜'点击后不会改变，而是停留在悬停图像上.
- 当我悬停它时，TD背景颜色不会改变
- javascript悬停在一个元素上会改变另一个元素
- 高点:悬停时堆叠的条形图改变不透明度
- 如何获得一个选择标签的值;悬停时不会改变
- 尝试使用Jquery悬停来改变字体大小
- JQuery . .改变焦点悬停状态&限制键盘导航选项卡区域
- 如何使用鼠标悬停改变css形状(圆圈)的边框颜色
- 在鼠标悬停时，使用javaScript改变RadRotator的RotatorType属性
- 只有Javascript -改变图像悬停在隐藏的单选按钮
- 悬停在元素上改变元素，然后在悬停中包含该元素
- 离子改变侧面菜单图标悬停和激活
- Jquery下拉菜单改变悬停时的字体重量
- 改变悬停组件的背景颜色
- 改变鼠标悬停时的KineticJS文本颜色
- Div CSS在悬停时不改变
- 如何在元素悬停时动态改变文本
- 鼠标悬停改变不工作
