Question

我尝试在客户端的鼠标悬停在其上时显示一个元素，并在它离开de object时消失，但它不起作用。这是非常简单的代码，我无法理解为什么它不起作用。这是代码：

Answer 1

$('#search').keydown(function () { setTimeout(function () { $( ".champion" ).each(function( index ) { var nameTag = $( this ).find('.name-tag').text().toLowerCase(); var searchStr = $('#search').val().toLowerCase(); if (nameTag.indexOf(searchStr) == -1) { $(this).hide(); } else { $(this).show(); } }); }, 10); });和visible应在引号中。

hidden

Answer 2

要使其正常运行，请将addEventListener包裹在window.onload中，如下所示：

<强> HTML：

<div id="earlyBirds">earlyBirds</div>
<div id="block">block</div>

<强> JS：

var appearenceEB = function(){
    block.style.visibility = "visible";
}

var dissappearenceEB = function(){
    block.style.visibility = "hidden";   
}

window.onload = function(){
    earlyBirds.addEventListener("mouseover", appearenceEB);
    earlyBirds.addEventListener("mouseout", dissappearenceEB);
};

DEMO - 1

其他方法是为onmouseover和onmouseout事件创建两个单独的函数，如下所示：

<强> HTML：

<div id="earlyBirds" onmouseover="mouseOver();" onmouseout="mouseOut();">earlyBirds</div>
<div id="block">block</div>

<强> JS：

function mouseOver(){
    document.getElementById('block').style.visibility = "visible";
}

function mouseOut(){
    document.getElementById('block').style.visibility = "hidden";
}

DEMO - 2

最好将javascript添加到head标签，否则使用javascript标签添加到正文中。此外，使用CSS将您的元素先前可见性设置为无，如下所示：

<强> CSS：

#block {
    visibility: hidden;
}

鼠标悬停mouseout javascript无效

2 个答案: