-1

当用户将鼠标悬停在我创建的图像地图上时，我试图显示名为“内容”的 div。此外，我还尝试将其设为Visibility属性Hidden并将其更改为Show当用户将鼠标悬停在地图上时，但效果不佳。

此外，我还有一个名为“成员”的 div，我想将其保留在图像的右侧。

摆弄属性会导致文本突然消失。为什么会发生？我该如何解决？

这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            #pipelines {
                margin-left: auto;
                margin-right: auto;
                margin-top: auto;
                margin-bottom: auto;
                float:left;

            }
            #content {
                font-family: Helvetica Neue;
                border: solid;
                padding-left: 10px;
                padding-right:10px;
                border-radius: 2px;
                background-color: white;
                position: relative;
                width: 20%;
                height: 0;
                padding-bottom: 20%;

            }
            hr{
                background-color:#000;
            }
            h4{padding-bottom:0px;
            padding-top:0px;}
            #members{
                float:right;
                position:relative;
            }

        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Pipeline</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    </head>

    <body>
        <div id="pipelines">
            <img src="2D_Pipeline.jpg" usemap="#Map" border="0"/>
            <map name="Map" id="Map">
              <area shape="rect" coords="155,70,267,96" href="#" alt="Writers" />
            </map>


        </div>
        <div id="members"><h1>Mem</h1></div>
        <div id="content">
            <h4></h4>
            <hr />
            John Howard
        </div>
        <script>

            $("#Map").on('mouseenter', function(e) {
                //$("#content").css("visibility", "show");
                $("#content").stop().show();
                $("#content").offset({
                    left : e.pageX,
                    top : e.pageY
                });
                var alt_script = $("area").attr("alt");
                $("#content h4").html(alt_script);
            });

            $("#content").on('mouseenter', function(e) {
                //$("#content").css("visibility", "show");
                $("#content").stop().show();

            });

            $("#Map").on('mouseleave', function(e) {
                $("#content").stop().delay(500).hide();
            });

            $("#content").on('mouseleave', function(e) {
                $("#content").stop().delay(500).hide();
            });

        </script>
    </body>
</html>

这是我正在使用的图像：http: //imgur.com/eJK42SZ :)

4

3 回答 3

1

delay()不适用于hide()或show()除非您提供缓动/动画队列。

delay()只对下一个动画进行排队，并且由于类似的方法hide()是即时的（而不是动画），它们不在队列中，因此不会延迟。

你可以做什么

var timer = setTimeout(function() { $('#id').hide(); }, 500);

并用于clearTimeout(timer);阻止函数执行。

于 2013-06-19T21:24:04.263 回答
0

这是你想要的，还是我错过了什么？

http://jsfiddle.net/blackjim/3NShg/3/（ctrl+shift+enter在浏览器窗口中查看）

$("#pipelines")
.on('mouseenter', function (e) {
    //    setTimeout here if you want and change fadeIn to show();
    $('#content').fadeIn(400);
})
.on('mouseleave', function (e) {
    $('#content').fadeOut(400)
});
于 2013-06-19T21:51:07.273 回答
0

Overflow: Hidden我实际上也通过使用和调整其他属性解决了这个奇怪的问题。

对于那些回答的人，感谢帮助。:)

于 2013-06-20T10:31:00.127 回答