Question

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

1）相邻元素有时会掩盖其邻居的突出显示（请参阅fiddle中的DIV 1 - 我希望DIV的所有四边都出现红色阴影1，而不仅仅是那些没有触及邻居DIV的人 - 我也尝试添加z-index，但它没有解决它）

2）当一个元素包含一个锚链接，该链接包含一个文字，该文字包含在一行以上，每行文本都会突出显示 - 理想情况下我希望整个链接被突出显示（例如，见DIV 4在相同的fiddle中 - 将鼠标悬停在包裹3条线的链接上 - 而不是拥有3个红色阴影框，我可以在整个链接周围获得1个阴影框吗？

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

修改

感谢那些在下面回答的人 - 你的解决方案在我的小提琴演示中工作 - 我现在把它们带到我的实际代码中但当我将鼠标悬停在它们上面时，我无法将图像“放到前面” - 很多图片仍然只有不到4面出现的悬停SHADOW - 我的代码就是这个（但需要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;添加到锚点，以便它按预期包裹链接

.sky a
{
    display: inline-block;
}

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

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

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

2 个答案: