Javascript 如何去除这颗令人敬畏的星星的白色轮廓？_Javascript_Jquery_Html_Css

Javascript 如何去除这颗令人敬畏的星星的白色轮廓？

javascript jquery html css

Javascript 如何去除这颗令人敬畏的星星的白色轮廓？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,请看这把小提琴：当您选择或将鼠标悬停在一个完整的星形上时，颜色会根据需要完全填充该星形但是，当您选择/悬停在半星上时，您会看到令人讨厌的白色轮廓。颜色没有完全填满星星的左半部分有办法摆脱这个吗？我知道它很小，但也有点恼火编辑：我的Firefox和Chrome出现了问题。以下是一个屏幕截图： HTML 我没有在mac上的chrome上看到它。你能发布一个屏幕截图吗？我也没有在OperaSo中看到，问题是你显示每个星星的左半部分，然后是整个星星。所以，当用户将鼠标悬停在半星上时，整个星并没有

请看这把小提琴：

当您选择或将鼠标悬停在一个完整的星形上时，颜色会根据需要完全填充该星形

但是，当您选择/悬停在半星上时，您会看到令人讨厌的白色轮廓。颜色没有完全填满星星的左半部分

有办法摆脱这个吗？我知道它很小，但也有点恼火

编辑：我的Firefox和Chrome出现了问题。以下是一个屏幕截图：

HTML

我没有在mac上的chrome上看到它。你能发布一个屏幕截图吗？我也没有在OperaSo中看到，问题是你显示每个星星的左半部分，然后是整个星星。所以，当用户将鼠标悬停在半星上时，整个星并没有被着色，从半星下可以看到它的白色背景（我想这是某些浏览器渲染算法中的一个缺陷）。也许你应该试着把半颗星放大一点？或者不使用全明星，只使用半明星的镜像？谢谢：D我刚刚调整了半明星的字体大小和边距，现在效果很好。非常感谢！你一定要发布一个解决方案作为答案！如果你能发布经过调整的HTML和CSS，对其他人来说可能会很有帮助。

<body>
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</body>

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; background-color:black; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
     font-size: 1.25em;
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label { color: #3232ff; } /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #2828cc;  } /* 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: #4c4cff;  }