[英]How to target only current hovered element in Vanilla Javascript
我正在为家庭作业构建一个 web 页面。 我试图弄清楚当我在底部的父 div 上方 hover 时如何让子 div 出现,有点像下拉菜单。 问题是子 div 有一个 class ,我只想要悬停的元素来显示来自父 div 的子 div。 更具体地说,我所说的父 div 是<div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();>
<div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();>
我正在谈论的子 div 是<div class="dropdown-content">
。我想使用 Vanilla Javascript (首选)或 CSS (不是首选)。
TLDR:如何在 Vanilla Javascript 中仅定位来自 HTML/CSS class 的当前悬停元素?
我怎么做?
我做到了这一点:
HTML
<!--Lab 1-->
<!--Each individual box.-->
<div class="box">
<!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
<div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();">
<!--The div with an image in it. Top one inside the box div.-->
<div>
<a href="Lab_01/LB1_WeiJianZhen_DD.html">
<!--Get an image with 300px width by 200px height. Make it responsive.-->
<img src="../../../Visual Content/placeholder.jpg" alt="Under Contruction" class="imgGrids">
</a>
</div>
<!--The div that contains the heading or title of the lab.-->
<div class="txtBar">
<h3><a href="Lab_01/LB1_WeiJianZhen_DD.html">Lab 1</a></h3>
</div>
<!--The div that drops down to explain the lab with some text.-->
<div class="dropdown-content">
<p>My first website ever made in an HTML file! Describes a bit about the process of making a very basic website like mine.</p>
</div>
<!--End of inside box div.-->
</div>
<!--End of box div.-->
</div>
CSS
/*Creates the styling of the dropdown box.*/
.dropdown-content {
display: none;
position: relative;
background-color: #62ff36;
box-shadow: 0px 8px 16px 0px rgba(56, 255, 42, 0.8);
padding: 12px 0px;
z-index: 1;
}
JavaScript
function showDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "block";
}
function hideDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "none";
}
清楚地解决这个问题的最简单、最高性能和整体绝对最好的方法是使用CSS 。
.inside-box:hover .dropdown-content { display: block; }
如果出于某种原因您坚持 go 和Javascript (我明确不推荐),您将不得不为每个.inside-box
添加 2 个侦听器,一个用于mouseenter
,另一个用于mouseleave
:
document.querySelectorAll('.inside-box').forEach(insideBox => {
insideBox.addEventListener('mouseenter', () => insideBox.querySelector('.dropdown-content').style.display = 'block');
insideBox.addEventListener('mouseleave', () => insideBox.querySelector('.dropdown-content').style.display = 'none');
})
像您建议的那样使用内联事件侦听器被认为是非常糟糕的做法,所以不要尝试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.