Question

看一下这个链接 http://robertnyman.com/fat/index.htm 该库将添加一个功能，将焦点设置为我们想要的一些元素，并使其余元素重叠。它有助于专注于某些元素。

有没有相同的库？

Answer 1

如果这不是你想要的，请给我更多细节

$(".search").mouseenter(function() {
    $(this).addClass("focusDiv");
    $(".overlay").show("fade", 500);
});

$(".search").mouseleave(function() {
    $(this).removeClass("focusDiv");
    $(".overlay").hide("fade", 500);
});

Answer 2

如果你想要一个非常轻量级的jQuery / CSS3设置，这是一个你可以尝试使用的基于点击的版本。显然可以修改它以使用您希望的任何类型的事件：

<html>
    <head>
        <style type="text/css">
            #modal-background {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: .50;
                -webkit-opacity: .5;
                -moz-opacity: .5;
                filter: alpha(opacity=50);
                z-index: 10;
            }

            #modal-background.active {
                display: block;
            }

            .highlight {
                background-color: #FFF;
                position: relative;
                z-index: 100;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("*:not(#modal-background)").click(function(){
                    event.stopPropagation();
                    $("#modal-background").toggleClass("active");
                    $("#modal-background").data("highlightedElement", this);
                    $($("#modal-background").data("highlightedElement")).toggleClass("highlight");
                });

                $("#modal-background").click(function(){
                    event.stopPropagation();
                    $("#modal-background").toggleClass("active");
                    $($("#modal-background").data("highlightedElement")).toggleClass("highlight");
                });
            });
        </script>
    <body>
        <h1>Bacon ipsum dolor sit amet</h1>
        <p>Prosciutto frankfurter qui aliqua do. Laborum elit pork chop, turkey tri-tip in capicola quis officia irure consequat pork sunt jerky tongue.</p>
        <div id="modal-background"></div>
    </body>
</html>

这是一个实际的jsFiddle：http://jsfiddle.net/Y2tEZ/

Answer 3

这是我做过的鼠标悬停模式实现。要使元素模态添加类gomodal。当这些元素被鼠标悬停时，我克隆它们，然后在页面的其余部分淡入透明覆盖层。

http://jsfiddle.net/uEwry/2/

$('.gomodal').mouseover(function() {
    var cloned = $(this)
        .clone()
        .addClass('modal')
        .css('top', $(this).offset().top)
        .css('left', $(this).offset().left); 
    $('body').append(cloned);
    $('#grayout').css('height', $(document).height()).css('width', $(document).width()).fadeIn(); });

$('body').on('mouseout', '.modal', function() {
    $('#grayout').fadeOut();
    $(this).remove(); });

如何将焦点设置在元素上并覆盖其余元素

3 个答案: