css - 鼠标悬停 CSS 上的图像阴影

Question

我希望当我将鼠标悬停在星形图像和星形(7.1)内的文字上时，在星形周围形成阴影 - 就像图片上的数字 1 一样。

问题是，当我将鼠标悬停在星星上时，它会被遮蔽(图片中的编号 1)，但是当我将鼠标悬停在文本 7.1 上时，星星不会被遮蔽(图片编号 2)。因此，当我将鼠标悬停在数字 7.1 上时，它需要看起来像图片 1 中的样子。

这是我的 CSS 代码:

.item-rating.rating img{margin-right: 16px;}.item-rating.rating img:hover {-webkit-filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.5));}

div#rating{边距-左:36px；边距顶部:-32px；position:absolute；

rating img 是 star.png 的图像，div#rating 是文本 7.1。

如何解决这个问题？我正在玩 z-index 和位置绝对和相对但没有去。

Answer 1

为文本创建一个div

7.1

并将 on move over 事件添加到 div 而不是星形图像。我认为这就是你想要做的。目前您所做的是，将 onmouse 事件添加到图像而不是文本。