使用JQuery突出显示元素时，CSS box-shadow出现问题

Question

我有一个简单的JQuery元素选择器 - 正如您所期望的那样，移入和移出元素会有一些突出显示。 它有效，但我遇到了两个问题，我喜欢请一些帮助（我确信一个CSS专家会在几秒钟内解决这个问题!!）：

1）相邻元素有时掩盖他们的邻居（见的高亮DIV 1在这个小提琴 -我想有红色的身影出现在四边DIV 1，而不是只对那些不碰相邻的DIV - 我也试过添加一个z-index但它没有解决它）

2）当一个元素包含一个锚链接时，该链接有一个文字，哪个单词包含在一行以上，每行文本都会突出显示 - 理想情况下我希望整个链接被突出显示（例如，在同一个小提琴中看到DIV 4） - 悬停在包裹3行的链接 - 而不是3个红色阴影框，我可以在整个链接周围获得1个阴影框吗？

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

编辑：

感谢那些在下面回答的人 - 你的解决方案在我的小提琴演示中工作 - 我现在把它们带到了我的实际代码中但当我将鼠标悬停在它们上面时，我无法将图像“放到前面” - 许多图像仍然存在只有他们的悬停SHADOW出现在少于4面 - 我的代码是这个（但需要PHP）：

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        img:hover{
            -webkit-box-shadow: 0 0 17px 10px green;
            -moz-box-shadow: 0 0 17px 10px green;
            box-shadow: 0 0 17px 10px green;
            z-index:5555555555;
            position:relative;
        }
</style>
</head>

<body>
<?php 
    echo'<div>';
             $url = 'http://www.guardian.co.uk';
             $data = file_get_contents($url);
             echo $data;
    echo'</div>';
    ?>
</body>
</html>

Answer 1

问题1 - 您只看到三边的边框，因为底边位于第二个框下方。 像这样把它弹到前面 - 这实际上是在你徘徊时把你兄弟的任何一个div带到前面

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

问题2 - 将链接设置为

display:block;

看到我对你小提琴的更新

http://jsfiddle.net/FusrG/9/

Answer 2

好的，首先，为什么不在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-index，让它按你的意愿display: inline-block; ，并添加display: inline-block; 到锚点，它可以像你期望的那样环绕链接。

.sky a
{
    display: inline-block;
}

http://jsfiddle.net/Kyle_Sevenoaks/FusrG/7/

使用CSS悬停来修复阴影： http ： //jsfiddle.net/Kyle_Sevenoaks/FusrG/11/