Javascript 如何在鼠标移出或悬停后显示隐藏的div

大家好，有人能帮我吗？我想在触发事件显示后显示一个隐藏的div，然后在该div上移除鼠标。这是我的代码

<div id='MainContainer'>
  <div id='btn-img' onmouseover='DisplayHidden()'>content 1</div>
  <div id='container2'>content 2</div>
</div>

function DisplayHidden()
{
  $('#container2').show();
}

内容1
内容2
函数DisplayHidden（）
{
$（'#container2'）.show（）；
}

---

有可能吗？

这里是一个使用纯javascript的简单解决方案：

var lastClick = null;

$('div#MainContainer div').click(function() {

    var clickedId = $(this).attr('id');

    if (clickedId == lastClick) {
        alert('Clicked the same div');
    }
    else {
        alert('Clicked on a different div'); 
        lastClick = clickedId;
    }
});

var g_lastTarget = null

var g_handleClick = function(e) {
  var target = e.currentTarget

  if (g_lastTarget === target) {
    alert('You clicked the container twice. Container ID = ' + target.id)
  }

  g_lastTarget = target
}

var c1 = document.getElementById('container1')
var c2 = document.getElementById('container2')

c1.addEventListener('click', g_handleClick)
c2.addEventListener('click', g_handleClick)

---

下面是一个使用纯javascript的简单解决方案：

var g_lastTarget = null

var g_handleClick = function(e) {
  var target = e.currentTarget

  if (g_lastTarget === target) {
    alert('You clicked the container twice. Container ID = ' + target.id)
  }

  g_lastTarget = target
}

var c1 = document.getElementById('container1')
var c2 = document.getElementById('container2')

c1.addEventListener('click', g_handleClick)
c2.addEventListener('click', g_handleClick)

---

创建一个公共类&使用

querySelectorAll

选择所需的元素

然后通过它循环附加eventListener方法。创建一个变量来存储当前单击元素的id。随后单击“检查变量值和id是否相同”。如果相同，则抛出警报

var getElements=document.querySelectorAll（“.elem”）；
var clickedElem=“”；
getElements.forEach（函数（项）{
item.addEventListener（'单击'，函数（））{
如果（item.id==clickedElem）{
警报（'单击同一分区'）
}否则{
单击edelem=item.id
}
})
})

内容1
内容2

创建一个公共类并使用

querySelectorAll

选择所需的元素

然后通过它循环附加eventListener方法。创建一个变量来存储当前单击元素的id。随后单击“检查变量值和id是否相同”。如果相同，则抛出警报

var getElements=document.querySelectorAll（“.elem”）；
var clickedElem=“”；
getElements.forEach（函数（项）{
item.addEventListener（'单击'，函数（））{
如果（item.id==clickedElem）{
警报（'单击同一分区'）
}否则{
单击edelem=item.id
}
})
})

内容1
内容2

我更喜欢这种方式，因为如果您想添加更多属性和比较参数，可以轻松添加，而且属性绑定是动态的

$（文档）.ready（函数（）{
$（“#maincainer>div”）。单击（“click”，函数（e）{
if（false==！！$（this.attr（'data-click'））{
$（this.attr（“数据点击”，true）；
警告（“否”）；
}否则{
警报（“单击同一分区”）；
}
});
});

内容1
内容2
我更喜欢这种方式，因为如果您想添加更多属性和比较参数，可以轻松添加，而且属性绑定是动态的


$（文档）.ready（函数（）{
$（“#maincainer>div”）。单击（“click”，函数（e）{
if（false==！！$（this.attr（'data-click'））{
$（this.attr（“数据点击”，true）；
警告（“否”）；
}否则{
警报（“单击同一分区”）；
}
});
});

内容1
内容2
以下是使用纯javascript可以做的事情

绑定容器元素上的click事件，并使用event.target属性检查上一个click元素并采取适当的操作



document.addEventListener（“DOMContentLoaded”，function（））{
var-prevElement=null；
document.querySelector（“#MainContainer”）.addEventListener（“单击”，函数（事件）{
if（prevElement==事件目标）{
console.log（“是”）
}否则{
控制台日志（“否”）；
}
prevElement=event.target；
});
});

内容1
内容2
以下是使用纯javascript可以做的事情

绑定容器元素上的click事件，并使用event.target属性检查上一个click元素并采取适当的操作



document.addEventListener（“DOMContentLoaded”，function（））{
var-prevElement=null；
document.querySelector（“#MainContainer”）.addEventListener（“单击”，函数（事件）{
if（prevElement==事件目标）{
console.log（“是”）
}否则{
控制台日志（“否”）；
}
prevElement=event.target；
});
});

内容1
内容2
表示如果您反复单击主容器及其子容器，则可能会在同一分区右侧显示clickin；如果在其他容器上，则会显示alert（“否”）@Dipak chavda是的，这是正确的表示如果您反复单击主容器及其子容器，则可能会在同一分区右侧显示clickin，如果在其他容器上，则会显示alert（“否”）@迪帕克·查夫达：是的，没错，谢谢你的回答！工作起来像个魔杖，回答得很好！很有魅力