做五个五角星 鼠标移入星星变亮

你可以使用 HTML、CSS 和 JavaScript 来实现这个效果。以下是一个简单的实现方法：

HTML 代码：

<div class="stars">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

CSS 代码：

.stars {
  font-size: 0;
}

.star {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("unlit-star.png");
  background-size: contain;
  margin-right: 10px;
}

.star:hover {
  background-image: url("lit-star.png");
}

在这个例子中，我们使用了一个 `<div>` 元素来包含五个星星。每个星星都是一个 `<span>` 元素，使用了 `background-image` 属性来设置星星的图像。当鼠标移动到星星上时，我们使用了 `:hover` 伪类来改变星星的背景图像，从而实现星星变亮的效果。

请注意，这个例子中使用的图像文件需要自己准备，并将文件名替换为代码中的文件名。

相关问题

做五个五角星鼠标移入星星变亮

好的，我可以为您提供一种实现方法。您可以先在HTML中使用五个div元素来表示五角星，并为每个元素添加一个唯一的ID，然后使用CSS样式来定义五角星的形状和颜色。接下来，您可以使用JavaScript来监听鼠标移入事件，并更改五角星的CSS样式，以实现星星变亮的效果。以下是示例代码：

HTML代码：

<div id="star1" class="star"></div>
<div id="star2" class="star"></div>
<div id="star3" class="star"></div>
<div id="star4" class="star"></div>
<div id="star5" class="star"></div>

CSS代码：

.star {
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #ccc;
  border-left: 20px solid transparent;
  transform: rotate(35deg);
  display: inline-block;
  margin: 10px;
}

.star:hover {
  border-bottom-color: #ff0;
}

JavaScript代码：

var stars = document.querySelectorAll(".star");

for (var i = 0; i < stars.length; i++) {
  stars[i].addEventListener("mouseover", function() {
    this.classList.add("hover");
  });

  stars[i].addEventListener("mouseout", function() {
    this.classList.remove("hover");
  });
}

上述代码中，我们首先使用querySelectorAll方法获取所有class为“star”的元素，并使用循环为每个元素添加鼠标移入和移出事件监听器。当鼠标移入元素时，我们使用classList.add方法添加“hover”类，以更改元素的CSS样式。当鼠标移出元素时，我们使用classList.remove方法删除“hover”类，以还原元素的CSS样式。最后，我们在CSS中定义了“hover”类，将星星的底部边框颜色更改为黄色，以实现星星变亮的效果。

做五个空五角星鼠标移入星星变亮

好的，您可以使用以下 HTML、CSS 和 JavaScript 代码来实现这个效果：

HTML 代码：

<div class="star-rating">
  <span class="star" data-rating="1"></span>
  <span class="star" data-rating="2"></span>
  <span class="star" data-rating="3"></span>
  <span class="star" data-rating="4"></span>
  <span class="star" data-rating="5"></span>
</div>

CSS 代码：

.star-rating {
  font-size: 0;
}

.star {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url('path/to/empty-star.png');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.star.active {
  background-image: url('path/to/filled-star.png');
}

JavaScript 代码：

const stars = document.querySelectorAll('.star');

stars.forEach(function(star) {
  star.addEventListener('mouseover', setStarRating);
});

function setStarRating(event) {
  const rating = event.target.getAttribute('data-rating');

  for (let i = 0; i < stars.length; i++) {
    if (i < rating) {
      stars[i].classList.add('active');
    } else {
      stars[i].classList.remove('active');
    }
  }
}

这段代码中，我们使用了五个 `span` 元素来表示五个空五角星。当鼠标移入到其中一个星星时，我们通过 JavaScript 代码来为这个星星和之前的所有星星添加 `active` 类名，从而将它们的背景图案更改为亮五角星。同时，我们也将鼠标移出星星区域时，所有星星的样式都会变为初始状态。