Question

我正在尝试做一个css悬停效果。我希望之前的恒星也会随着恒星的徘徊而改变它们的背景图像。

我尝试了一些不同的东西，但似乎无法理解必须使用的CSS。有人可以指导我吗？

我有评分项目here

HTML

<form action="" method="post" class="absolute babesRate flex">
    <label>
        <input type="radio" name="vote" value="1" id="vote1">
    </label>
    <label>
        <input type="radio" name="vote" value="2" id="vote2">
    </label>
    <label>
        <input type="radio" name="vote" value="3" id="vote3">
    </label>
    <label>
        <input type="radio" name="vote" value="4" id="vote4">
    </label>
    <label>
        <input type="radio" name="vote" value="5" id="vote5">
    </label>
</form>

CSS

label{
    background-image: url(../img/voteEmpty.png);
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
}
label+input[type="radio"]:checked{
    background-image: url(../img/voteFull.png);
}
label:hover{
    background-image: url(../img/voteFull.png);
}

Answer 1

在你的风格结束时，你有这个：

.parent label:hover,
.parent label:hover ~ label {
   background-image: url(../img/voteFull.png);
}

将其更改为：

label:hover,
label:hover ~ label {
   background-image: url(../img/voteFull.png);
}

Answer 2

您需要这样做，将input放在label之外，否则他们不会＆＃34;看到＆＃34;标签，然后，使用flexbox order属性，您可以在标记中交换它们，以便您可以使用兄弟选择器~。

＆＃13;

.flex {
  display: flex;
}
label {
  display: inline-block;
  background: gray url(../img/voteEmpty.png);
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  margin: 2px;
}
input[type=radio] {
  display: none
}
label:nth-of-type(1) { order: 5; }
label:nth-of-type(2) { order: 4; }
label:nth-of-type(3) { order: 3; }
label:nth-of-type(4) { order: 2; }
label:nth-of-type(5) { order: 1; }

input:checked ~ label {
  background: red url(../img/voteFull.png);
}
form:hover label {
  background: gray url(../img/voteEmpty.png); 
}
form label:hover,
label:hover ~ label {
  background: red url(../img/voteFull.png);
}

＆＃13;

<form action="" method="post" class="absolute babesRate flex">
  <input type="radio" name="vote" value="5" id="vote5">
  <label for="vote5">5</label>
  <input type="radio" name="vote" value="4" id="vote4">
  <label for="vote4">4</label>
  <input type="radio" name="vote" value="3" id="vote3">
  <label for="vote3">3</label>
  <input type="radio" name="vote" value="2" id="vote2">
  <label for="vote2">2</label>
  <input type="radio" name="vote" value="1" id="vote1">
  <label for="vote1">1</label>
</form>

＆＃13;

如何更改星星上的背景图像？

2 个答案: