css - IMG 阴影鼠标悬停 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{margin-left: 36px; 边距顶部：-32px；位置：绝对；}

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

如何解决这个问题？我在玩 z-index 和绝对位置和相对位置，但不行。

Answer 1

为文本 <div>7.1</div> 创建一个 div，并将 on move over 事件添加到 div 而不是星形图像。我认为这就是你想要做的。目前您所做的是，将鼠标事件添加到图像而不是文本。

Answer 2

创建第三个 div。在这个 div 中放置星号和文本 div。然后，您可以将悬停添加到包含其中两个的 div。当您将鼠标悬停在任一项目上时，这将在星星上创建一个阴影。