Question

如果过滤器检测到该元素，我想隐藏该元素（＆＃34;可见＆＃34;）。

我们可以看到内部图片是可见的，但是如果设置<a>位置绝对可以找到外部元素<img>的原因？

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        a {
            position: absolute;
        }
        img {
            position: absolute; //the filter() works if i annotate this line
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#container a").filter(":visible").hide()
        });
    </script>
</head>
<body>
<div id="container">
    <a href=""><img src="http://sudasuta.com/script/timthumb.php?src=http://sudasuta.com/wp-content/uploads/2014/03/he-British-Library-2.jpg&h=200&w=260&zc=1"></a>
</div>
</body>
</html>

Answer 1

根据the documentation：

如果元素占用文档中的空间，则认为元素是可见的。

如果您绝对定位img，则a不再占用文档中的任何空格，因为其中唯一的内容并不会对其大小产生影响，因此它和＃39; s 0高0宽。

执行任何赋予a元素大小的操作都会改变行为。例如，将width: 1px添加到a元素的规则中。（示例：Not working | Working with width: 1px。）

Answer 2

原因是，当您在position: absolute中设置img时，img元素将从文档的正常流程中取出。结果呢？ a的高度为0. :visible返回占据屏幕空间的所有元素（隐藏，不可见或有效高度或宽度等于零）。

如果设置内部元素位置，绝对不能通过filter（“：visible”）找到外部元素的原因？

2 个答案: