Javascript/Jquery 实现谷歌浏览器F12开发模式的选择效果

[charlesloong]

请问有哪位同学搞过这相关的效果，
就是 谷歌浏览器/IE 浏览器 F12 开发人员模式后，点击选择器选择页面的上的DOM元素这种效果。
刚开始觉得简单，实现起来以后各种问题出现了。

请教高手，谢谢大家。

[vincentguo_]

        $(document).ready(function() {
            $("*").mouseover( function() {
                   $(this).addClass('cover');
                   console.log($(this));
                   event.stopPropagation() 
                }).mouseout( function() {
                    
                     $(this).removeClass('cover');
                     //event.stopPropagation() 
                })
            
        });

[vincentguo_]

引用 3 楼 vincentguo_ 的回复:

        $(document).ready(function() {
            $("*").mouseover( function() {
                   $(this).addClass('cover');
                   console.log($(this));
                   event.stopPropagation() 
                }).mouseout( function() {
                    
                     $(this).removeClass('cover');
                     //event.stopPropagation() 
                })
            
        });

给你css <style> .cover{ background-color: blue; opacity: 0.5; outline-style: dotted; } </style>

[charlesloong]

为什么没有人会贴呢？

[charlesloong]

是没有明白的意思吗？ 就是使用Javascript/Jquery 实现浏览器选择器效果。 浏览器 F12 选择页面上的元素被遮盖，精准定位的效果。

[charlesloong]

引用 3 楼 vincentguo_ 的回复:

        $(document).ready(function() {
            $("*").mouseover( function() {
                   $(this).addClass('cover');
                   console.log($(this));
                   event.stopPropagation() 
                }).mouseout( function() {
                    
                     $(this).removeClass('cover');
                     //event.stopPropagation() 
                })
            
        });

谢谢，跟我写的一样，连样式名称都差不多一致。 还是谢谢你！