JavaScript："onmouseenter"-Function
JavaScript："onmouseenter"-Function
提问于 2017-12-20 14:42:32
目前，我正在自学一些HTML、CSS和JavaScript。我很难理解函数的用法。
我在另一个div中有一个div style="display: none“。当用户使用鼠标进入第一个div时，第一个div的"style.display“设置为”块“。当他离开它时，第二个div的"style.display“再次被设置为"none”。现在的问题是，一个函数应该对所有这类div都这样做。HTML看起来是这样的：
<table>
<tr>
<td>
<div class="box box2" onmouseenter="show(this)" onmouseleave="hide()">
<b>HTML</b>
<div class="expl expl2" style="display:none" id="test">
<ul>
<li><b>Software</b></li>
<li><i>HTML</i></li>
<li>HTML, CSS, JavaScript...</li>
</ul>
</div>
</div>
</td>
<td>
<div class="box box2" onmouseenter="show(this)" onmouseleave="hide2()">
<b>HTML</b>
<div class="expl expl2" style="display:none" id="test2">
<ul>
<li><b>Software</b></li>
<li><i>CSS</i></li>
<li>HTML, CSS, JavaScript...</li>
</ul>
</div>
</div>
</td>
</tr>
</table>目前，JavaScript看起来是这样的：
function show(x){
x = document.querySelector('.expl').style.display ="block";
}我不知道如何正确地使用“这个”，但我在这里尝试过，因为它似乎对我是正确的，但也许我完全错了。我希望能够在表中添加任意数量的div，但不需要更改函数。目前，如果我在外部div中的任何一个上"mouseenter“，那么第一个div内部的惟一div将得到正确的"style.display”。
这个想法是朝着正确的方向发展，还是我的做法是错的？
Stack Overflow用户
发布于 2017-12-20 14:59:34
下面是一个函数，可以在鼠标输入时显示或隐藏的任何元素上使用。
只需添加类：triggerMouseHere，使div在鼠标进入并离开时可由javascript触发。
添加类：triggerChangeOnMouseEvent，以便在鼠标进入/离开父div时使div可见/隐藏
$(function() {
$(".triggerMouseHere").on("mouseenter", function() {
$(this).find(".triggerChangeOnMouseEvent").first().show();
});
$(".triggerMouseHere").on("mouseleave", function() {
$(this).find(".triggerChangeOnMouseEvent").first().hide();
});
});.hidden{
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="box box2 triggerMouseHere">
<b>HTML</b>
<div class="expl expl2 hidden triggerChangeOnMouseEvent" id="test">
<ul>
<li><b>Software</b></li>
<li><i>HTML</i></li>
<li class="triggerMouseHere">HTML, CSS, JavaScript...
<div class="expl expl2 hidden triggerChangeOnMouseEvent" id="test">
<ul>
<li><b>Software</b></li>
<li><i>HTML</i></li>
<li class="triggerChangeOnMouseEvent">HTML, CSS, JavaScript...
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</td>
<td>
<div class="box box2 triggerMouseHere">
<b>HTML</b>
<div class="expl expl2 hidden triggerChangeOnMouseEvent" id="test2">
<ul>
<li><b>Software</b></li>
<li><i>CSS</i></li>
<li>HTML, CSS, JavaScript...</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
只是一个问题，为什么不使用css来显示，隐藏child elements呢？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47908509
复制相关文章
相似问题
腾讯云开发者
