鼠标悬停CSS上的IMG阴影

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; margin-top：-32px; position：absolute;}

评级img是star.png的图像，div＃rating是文本7.1。

如何解决这个问题？我正在玩z-index和位置absoulute和亲戚，但没有去。

Answer 1

为文本创建div ＆LT; div> 7.1＆lt; / div＆gt; 并将事件上的移动添加到div而不是星形图像。 我想这就是你要做的事情。 目前您正在做的是，将onmouse事件添加到图像而不是文本。

Answer 2

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