如何在CSS中添加鼠标悬停事件效果？

在CSS中本身并不直接支持鼠标悬停事件的效果，因为它主要用于样式设计而非交互。然而，你可以配合JavaScript或者jQuery等JavaScript库来实现鼠标悬停事件，然后通过CSS更改元素的样式。

如果你想仅使用纯CSS实现一种简单的效果，例如改变颜色或背景，可以利用伪类`:hover`。例如：

.smiley-image:hover {
    cursor: pointer; /* 可选，设置鼠标指针为手形 */
    color: red; /* 当鼠标悬停时，文字变为红色 */
    background-color: yellow; /* 或者背景变为黄色 */
}

这里的`.smiley-image`是你想要设置悬停效果的元素的选择器。

如果要处理复杂的效果，比如动画或过渡，通常还是建议结合JavaScript，例如使用`addEventListener`监听`mouseover`和`mouseout`事件：

const smileyImage = document.querySelector('.smiley-image');
smileyImage.addEventListener('mouseover', function() {
    this.style.transform = 'scale(1.1)'; // 放大图像
});
smileyImage.addEventListener('mouseout', function() {
    this.style.transform = 'scale(1)'; // 恢复原大小
});

这里使用了`transform`属性改变元素的尺寸作为悬停效果。