我有一个简单的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>

#1楼 票数:2 已采纳

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

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

问题2 - 将链接设置为

display:block;

看到我对你小提琴的更新

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

#2楼 票数:1

好的,首先,为什么不在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/

  ask by Steve translate from so

未解决问题?本站智能推荐:

2回复

CSS有没有像jQuery的那样:has()?

在CSS(任何版本)中,是否有类似于jQuery中的:has()选择器的任何其他方式? jQuery(':has(selector)') 描述:选择包含至少一个与指定选择器匹配的元素的元素。 http://api.jquery.com/has-selector/
4回复

突出显示所选页码的有效方法是什么?

我在html页面的<li>中有数字,这些数字代表页面数: 页数是动态的,如何使用jQuery来加粗被单击的页码文本,而其他页码文本则保持默认字体样式? 当选择了新的页码时,是否必须使用for循环将未选择的样式更改为默认样式?
1回复

我可以使用CSS3选择器基于子元素进行选择吗?

我需要选择一个<p>元素,该元素具有与特定类嵌套的<a> 。 <a>并不总是<p>的子代,而可以是孙子代。 例如: 如果<p>元素在内部任何位置都具有类f5的<a> ,则需要选择<p>元素。
2回复

是否在jQuery中使用第n个子选择器依赖于对CSS3的浏览器支持?

或者在IE6 / IE7大量使用时使用是否安全?
1回复

为什么我的jQuery:not()选择器不在CSS中工作?

我有这个布局: <div id="sectors"> <h1>Sectors</h1> <div id="s7-1103" class="alpha"></div> <div id="s8-1104" class
2回复

CSS问题-如何在不更改容器大小的情况下防止浮动对象包装在容器中?

这是我的JSfiddle文件: http://jsfiddle.net/TSM_mac/xXcZx/1/ 基本上,我正在尝试使第二个div滑入,而第一个div滑出。 我的CSS出现问题,第二个div(因为它是float:左)转到下一行 解决该问题的方法是确保它们始终保持在同一行,
1回复

jQuery真正支持哪些CSS3选择器,例如:nth-​​last-child()?

根据http://api.jquery.com/category/selectors/,我们可以在jQuery中使用大量的CSS选择器,但是例如:nth-last-child()在那里没有提到。 但是,当我测试以下内容时(使用jQuery 1.7.1来自Google),它实际上适用于Firef
4回复

CSS/JQuery选择器:无论如何都要在类中选择类?

我们假设我们有以下标记: 无论如何选择黑色和蓝色的t-shirt或sweater搭配一个选择器? 我的意思是,不使用逗号分隔的选择器。 例如,我不想做以下事情: 反正有没有做类似以下的事情? (我知道它不起作用): 提前致谢。