1

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

1）相邻元素有时会掩盖其邻居的突出显示（请参见此小提琴DIV中的 1 - 我希望红色阴影出现在1 的所有四个边上，而不仅仅是那些不接触相邻元素的边上- 我也尝试添加一个但它没有解决它）DIVDIVz-index

2）当一个元素包含一个锚链接，该链接的文本包含多行文字时，每行文本都会被突出显示 - 理想情况下，我希望整个链接都被突出显示（例如，参见DIV同一个小提琴中的 4 - 将鼠标悬停在包裹超过 3 行的链接 - 不是有 3 个红色阴影框，我可以在整个链接周围放置 1 个阴影框吗？

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

编辑：

感谢那些在下面回答的人-您的解决方案在我的小提琴演示中有效-我现在已经将这些应用到我的实际代码中，但是当我将鼠标悬停在它们上方时，我无法让图像“来到前面”-仍然有很多图像只有他们的悬停阴影出现在少于 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>
4

2 回答 2

2

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

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

问题 2 - 将链接设置为

display:block;

看看我对你的小提琴的更新

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

于 2012-09-17T12:13:44.717 回答
1

好的，首先，为什么不在:hoverCSS 中使用伪选择器呢？

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 内置的东西？

您必须为.topdiv 提供一个位置和 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/

于 2012-09-17T12:10:01.357 回答