Question

当用户将鼠标悬停在我创建的图像映射上时，我试图显示名为“内容”的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：）

Answer 1

除非您提供缓动/动画队列，否则

delay()不能与hide()或show()一起使用。

delay()只排队下一个动画，因为像hide()这样的方法是即时的（而不是动画），所以它们不在队列中，因此不会延迟。

你能做什么

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

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

Answer 2

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

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)
});

Answer 3

我实际上使用Overflow: Hidden＆amp;来解决了这个奇怪的问题。调整其他属性。

对于那些回答的人，感谢帮助人员。：）

文本未出现在Div中

3 个答案: