javascript - 如何使div在asp.net中的悬停鼠标上弹出?

标签 javascript jquery css asp.net

我正在使用here编写的代码。

$('a.popper').hover(function (e) {...});

    <script src="jquery-1.2.6.js"></script>
<script type="text/javascript">
    var moveLeft = 0;
    var moveDown = 0;
    $('a.popper').hover(function (e) {

        var target = '#' + ($(this).attr('data-popbox'));
        $(target).show();
        moveLeft = $(this).outerWidth();
        moveDown = ($(target).outerHeight() / 2);
    }, function () {
        var target = '#' + ($(this).attr('data-popbox'));
        if (!($("a.popper").hasClass("show"))) {
            $(target).hide();
        }
    });

    $('a.popper').mousemove(function (e) {
        var target = '#' + ($(this).attr('data-popbox'));

        leftD = e.pageX + parseInt(moveLeft);
        maxRight = leftD + $(target).outerWidth();
        windowLeft = $(window).width() - 40;
        windowRight = 0;
        maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);

        if (maxRight > windowLeft && maxLeft > windowRight) {
            leftD = maxLeft;
        }

        topD = e.pageY - parseInt(moveDown);
        maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
        windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
        maxTop = topD;
        windowTop = parseInt($(document).scrollTop());
        if (maxBottom > windowBottom) {
            topD = windowBottom - $(target).outerHeight() - 20;
        } else if (maxTop < windowTop) {
            topD = windowTop + 20;
        }

        $(target).css('top', topD).css('left', leftD);
    });
    $('a.popper').click(function (e) {
        var target = '#' + ($(this).attr('data-popbox'));
        if (!($(this).hasClass("show"))) {
            $(target).show();
        }
        $(this).toggleClass("show");
    });
</script>

        <div id="pop1" class="popbox">
 <h2>Job Info Search</h2>

 <h2>WRKNo : <input type="text"  /></h2>

 <h2>Result</h2>

<p>Customer Name :
    <input type="text" />
</p>
<p>Caller Number :
    <input type="text" />
</p>
<p>Complosed :
    <input type="text" />
</p>
<p>Cate :
    <input type="text" />
</p>
<p>Det :
    <input type="text" />
</p>
<p>Feedback :
    <input type="text" />
</p>
<p>WRKNo :
    <input type="text" />
</p>


这是一个popbox测试。将鼠标悬停在此处以了解其工作原理。

的CSS

        .popbox {
display: none;
position: absolute;
z-index: 99999;
width: 400px;
padding: 10px;
background: #EEEFEB;
color: #000000;
border: 1px solid #4D4F53;
margin: 0px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);


}

.popbox h2 {
background-color: #4D4F53;
color: #E3E5DD;
font-size: 14px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;


}

那里工作正常,但是如果我在asp.net中使用相同的代码,它将无法正常工作。什么都没发生。有没有更多的解决方法可以使它在asp.net中工作,或者asp.net根本不支持此方法。

我如何在asp.net中做同样的事情?

谢谢,

最佳答案

就像里克所说的那样,ASPX代码将很有用。 JavaScript和ASP并不总是很好用,可能需要ScriptManager。

关于javascript - 如何使div在asp.net中的悬停鼠标上弹出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23924599/

相关文章:

javascript - 如何检查是否选择了每行中的任何按钮

Javascript 幻灯片显示最后一张图片 5 次

css - CSS轮廓出现在意外的地方

css - 在 twitter bootstrap 的导航栏中对齐按钮和文本

javascript - 根据用户的文本输入设置背景色

javascript - 如何配置 Bootstrap 镜像?

javascript - 无法使 HTML/PHP/JavaScript 幻灯片代码正常工作

javascript - 选择元素数组,然后给它方法

javascript - 带有当前 View 位置的 css 动画整页

javascript - PhoneGap Ajax 调用