gpt4 book ai didi

javascript - 鼠标悬停在 div 上时 chrome 中的闪烁问题

转载 作者:行者123 更新时间:2023-12-02 18:58:11 24 4
gpt4 key购买 nike

我编写了一个 JavaScript,它根据提供给它的 jSON 数据生成动态元素。

  $(function () {
var list = JSON.parse(@ViewBag.NomineeList);
var counter = 1;
var tr;
$(list).each((function () {
if (counter % 2 != 0) {
tr = CreateElems('tr', null, null);
}
var td = CreateElems('td', null, null);
var div = CreateElems('div', 'dvBorder', null);
div.attr('empID', this.EmpId);
div.attr('nomineeID', this.Id);
RegisterEvents(div);
div.append('<img alt="user" src=' + this.UserImagePath + ' style="padding: 5px;" />');
div.append(CreateElems('span', 'EmpolyeeName', this.FirstName));
div.append(CreateElems('span', 'EmployeeEmail', this.Email));
td.append(div);
tr.append(td);
if (counter % 2 == 0) {
$('#tblEmployee').append(tr);
tr = "";
}
counter++;
}));
});

function CreateElems(type,cssClass,value)
{
var elem = $(document.createElement(type));

if(value != null)
elem.text(value);

if(cssClass!= null)
elem.addClass(cssClass);

return elem;
}

我为创建的动态元素注册了三个不同的事件。

   function RegisterEvents(crntDiv) {
var url;
$(crntDiv).click(function () {
url = "/home/SaveVote?nomineeId=" + $(crntDiv).attr('nomineeID');
AjaxCall(url, false, crntDiv);
});

$(crntDiv).mouseover(function () {
RemoveToolTip();
url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID');
AjaxCall(url, true, crntDiv);
});

$(crntDiv).mouseout(function () {
$(crntDiv).children('div.RollOverTip').remove();
});

}

当您将鼠标悬停在工具提示上时,就会出现。在该事件中,我将检查 dom 中是否存在任何以前的工具提示,应将其删除。

  function RemoveToolTip() {
$('#tblEmployee').find('div.RollOverTip').remove();
}

但有时浏览器上仍会出现超过两三个工具提示。还可以稍微优化一下吗。

HTML

<table border="0" cellpadding="5" cellspacing="0"  id="tblEmployee">
</table>

CSS 类。

.dvBorder
{
background-image: url(/Images/screen2-button.png);
background-repeat: no-repeat;
height: 125px;
width: 400px;
cursor:pointer;
position: relative;
}


.RollOverTip
{
background-image: url("/Images/screen2-rollover-tooltip.png");
background-repeat: no-repeat;
color: #000000;
font-family: Calibri Regular;
font-size: 18pt;
height: 199px;
line-height: 20pt;
margin-left: 385px;
position: absolute;
width: 474px;
z-index: 90000;
padding:34px;
}

脚本中可以进行哪些优化,还有消除闪烁的建议吗?

最佳答案

尝试使用mouseentermouseleave来停止闪烁

    $(crntDiv).mouseenter(function () {
RemoveToolTip();
url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID');
AjaxCall(url, true, crntDiv);
});

$(crntDiv).mouseleave(function () {
$(crntDiv).children('div.RollOverTip').remove();
});

关于javascript - 鼠标悬停在 div 上时 chrome 中的闪烁问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15108943/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com