CSS鼠標劃過帶星星效果在網頁設計中非常常見，它可以給用戶帶來一種視覺上的交互體驗，增強網頁的美感和趣味性。以下是一個實現這種效果的CSS代碼示例：

.star-rating {
display: inline-block;
font-size: 0;
overflow: hidden;
line-height: 1;
}
.star {
display: inline-block;
margin: 0 2px 0 0;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: 16px 16px;
}
.star:hover,
.star:hover ~ .star {
background-image: url("star-filled.png");
}
.star-rating:hover .star:hover ~ .star {
background-image: url("star-empty.png");
}

上面的代碼中，首先定義了一個CSS類.star-rating，它用于包裹整個星星評分組件。在.star-rating類中，通過設置display屬性為inline-block，使星星組件垂直排列，同時設置font-size為0和overflow為hidden，可以清除行內元素默認的文本間隙和溢出問題。此外，設置line-height為1可以保持星星元素的垂直居中對齊。

星星元素使用了.star類，其中定義了星星的樣式，包括了width、height、margin、background-repeat和background-size等屬性。在:hover狀態下，星星元素的背景圖像會變成star-filled.png。同時，通過使用鄰接選擇器（~）選擇同級別的未被鼠標懸停的星星元素，使其背景圖像也跟著變化。

此外，星星組件在:hover狀態下，還可以通過設置.star-rating:hover .star:hover ~ .star的選擇器，來控制未被鼠標懸停的星星元素的樣式。當整個星星組件處于:hover狀態時，未被鼠標懸停的星星元素的背景圖像將變成star-empty.png。

綜上所述，CSS鼠標劃過帶星星效果可以通過以上的代碼快速實現，給網頁帶來更好的交互體驗。