使用JQuery高亮显示元素时CSS框阴影出现问题

我有一个简单的JQuery元素选择器——正如您所期望的，移入和移出元素会进行一些高亮显示。这是可行的，但我遇到了两个问题，我希望能得到一些帮助（我相信CSS高手会在几秒钟内解决这个问题！！）：

1） 相邻元素有时会掩盖其相邻元素的突出显示（请参见本文中的

DIV

1-我希望红色阴影出现在

DIV

1的所有四边，而不是仅出现在那些不接触相邻

DIV

的元素上-我还尝试添加了

z-index

，但无法解决此问题）

2） 当一个元素包含一个锚定链接，该链接包含word包装到多行的文本时，每行文本都会高亮显示—理想情况下，我希望整个链接都高亮显示（例如，请参见同一部分中的

DIV

4-将光标悬停在环绕3行的链接上-我可以在整个链接周围获得1个阴影框而不是3个红色阴影框吗

注意事项： 我在各种第三方网页上使用这段代码，因此我无法以可伸缩的方式更改/编辑HTML

编辑：

感谢下面回答的人-您的解决方案在我的fiddle演示中发挥了作用-我现在已经将这些应用到了我的实际代码中，但当我将图像悬停在它们上面时，我无法让它们“出现在前面”-许多图像的悬停阴影仍然只出现在不到4面上-我的代码是这样的（但需要php）：

img：悬停{
-webkit盒阴影：0 0 17px 10px绿色；
-moz盒阴影：0 0 17px 10px绿色；
盒子阴影：0 0 17像素10像素绿色；
z指数：5555；
位置：相对位置；
}

好的，首先，为什么不在CSS中使用

：hover

伪选择器呢

div:hover, a:hover
{
    -webkit-box-shadow: 0 0 17px 10px #f51f4c;
  -moz-box-shadow: 0 0 17px 10px #f51f4c;
  box-shadow: 0 0 17px 10px #f51f4c !important;
}​

而不是使用JS来做CSS内置的事情

您必须为

.top

div指定一个位置和z索引，使其按您的意愿显示，并将

显示：inline block；

添加到锚点，使其按预期环绕链接

.sky a
{
    display: inline-block;
}

---

使用CSS hover修复阴影：

问题1-你只看到三个面上的边框，因为底边在第二个框下面。像这样将其弹出到前面-这实际上会在悬停时将你的任何兄弟div带到前面

div:hover {z-index:5; position:relative;}

问题2-将链接设置为

display:block;

查看我对你小提琴的更新

---

您的示例现在在第二个div中出现了阴影z索引问题。@kyle sevenoaks-请查看我对上面原始问题的编辑-我已经尝试过了，但无法让“带到前面”部分处理我的新代码-谢谢我们需要从浏览器中查看输出HTML，我们不知道PHP调用中包含什么。kyle，这不是clev呃-它只是将该网站的主页加载到我页面的container div中，并允许我的css在其元素上“悬停”，这样我就可以从该页面选择一个图像。@Steve-它仍然很有用，因为我们可以确保您生成的内容不会出现语法错误或其他问题，从而使解决方案无法工作。Charles-tha谢谢你在这方面的帮助-我已经在我的代码中加入了一些-请看我在原始问题中的编辑-我仍然无法将图像放在前面（即使它在小提琴示例中起作用）-知道我哪里出错了吗？（谢谢）Steve-您正在尝试将z索引应用于img-将其应用于包含的div。此外，阴影在所有的四个边上，但第二个框覆盖着它；一旦您可以将元素弹出到前面，您将看到它周围的阴影-hth

display:block;