js 鼠标星星

在JavaScript中实现鼠标悬停显示星星（通常用于评分或点赞功能）的功能，可以通过HTML、CSS和JavaScript结合来完成。下面是一个简单的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Star Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="star-rating">
        <span class="star" data-value="1">&#9733;</span>
        <span class="star" data-value="2">&#9733;</span>
        <span class="star" data-value="3">&#9733;</span>
        <span class="star" data-value="4">&#9733;</span>
        <span class="star" data-value="5">&#9733;</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.star-rating {
    display: flex;
    font-size: 2em;
    cursor: pointer;
}

.star {
    color: grey;
    transition: color 0.2s;
}

.star.filled {
    color: gold;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star');

    stars.forEach(star => {
        star.addEventListener('mouseover', function() {
            const value = this.getAttribute('data-value');
            highlightStars(value);
        });

        star.addEventListener('mouseout', function() {
            resetStars();
        });

        star.addEventListener('click', function() {
            const value = this.getAttribute('data-value');
            // 这里可以添加代码将评分发送到服务器
            console.log(`Star rating: ${value}`);
        });
    });

    function highlightStars(value) {
        stars.forEach(star => {
            if (star.getAttribute('data-value') <= value) {
                star.classList.add('filled');
            } else {
                star.classList.remove('filled');
            }
        });
    }

    function resetStars() {
        stars.forEach(star => {
            star.classList.remove('filled');
        });
    }
});

解释

HTML: 创建了一个包含五个星星的容器，每个星星都有一个data-value属性，表示其评分值。
CSS: 定义了星星的基本样式和过渡效果。.filled类用于高亮显示选中的星星。
JavaScript:
- 添加事件监听器以处理鼠标悬停、移出和点击事件。
- highlightStars函数根据鼠标悬停的星星值高亮显示相应的星星。
- resetStars函数在鼠标移出时重置所有星星的样式。
- 点击事件可以用于将评分发送到服务器（示例中仅在控制台输出）。