-2

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

有没有相同的图书馆？

4

3 回答 3

2

这就是我所做的http://jsfiddle.net/Mouki/6ssXY/

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

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

$(".search").mouseleave(function() {
    $(this).removeClass("focusDiv");
    $(".overlay").hide("fade", 500);
});
于 2012-11-04T04:15:26.090 回答
0

这是我所做的鼠标悬停模式实现。要使元素模式化，请将类添加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(); });
于 2011-12-25T03:16:23.400 回答
0

如果您想要一个非常轻量级的 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/

于 2011-12-25T03:08:26.280 回答