将鼠标悬停在 flexbox 中的内容上时如何使框出现？

Question

我一直在尝试制作一个弹性盒子，然后当 flexbox 内的内容悬停时，会出现另一个盒子（在它下面，而不是旁边）。 出于某种原因，当使用“flex-container”时，这是可行的。 但我不希望这种情况发生在人们 hover 之间的空格上。 当尝试执行此操作并专门调用 class 时，它是“flex-container-content”，它拒绝工作。 出于某种原因，它什么也不做。 我什至尝试为它分配一个ID，但它没有用。 我不知道我还应该尝试什么，因为对我来说它似乎应该工作。 有什么想法吗？

 .flex-container { display: flex; background-color: white; margin-left: 5%; }.flex-container-content { background: black; color: white; margin: 1%; font-family: 'Lucida Sans Regular'; font-size: x-large; padding: 1% 2% 1% 2%; border-radius: 5px; }.flex-container-content:hover{ display: block; background: rgb(34, 34, 34); cursor: pointer; color: rgb(175, 175, 175) } #job-descriptor-1 { display: none; color: rgb(218, 218, 218); background: rgb(121, 121, 121); font-family: 'Lucida Sans Regular'; font-size: large; padding: 2%; box-shadow: 0px 0px 3px 0px; text-align: center; } #flex-1:hover + #job-descriptor-1{ display: block; }

 <div class="flex-container"> <div id="flex-1" class="flex-container-content">Police</div> <div class="flex-container-content">Fast Food</div> <div class="flex-container-content">Trucker</div> <div class="flex-container-content">Drug Dealer</div> <div class="flex-container-content">Post Office Curier</div> <div class="flex-container-content">Fisherman</div> </div> <div id="job-descriptor-1"> Hello there, top of the morning to you. </div>

Answer 1

您正在使用相邻的兄弟选择器（ + ），这意味着您要定位的元素需要是其父元素的下一个元素 - 但#job-descriptor-1在父元素之外（ flex-container ）。 目前 CSS 没有办法向上遍历。 没有 JavaScript 的唯一方法是将#job-descriptor-1移动到flex-container内的某个位置。

然后，您可以使用position: absolute类的定位技术，以避免#job-descriptor-1影响 flex 布局。

---

 .flex-container { display: flex; background-color: white; margin-left: 5%; }.flex-container-content { position: relative; background: black; color: white; margin: 1%; font-family: 'Lucida Sans Regular'; font-size: x-large; padding: 1% 2% 1% 2%; border-radius: 5px; }.flex-container-content:hover { background: rgb(34, 34, 34); cursor: pointer; color: rgb(175, 175, 175) } #job-descriptor-1 { display: none; position: absolute; top: 100%; color: rgb(218, 218, 218); background: rgb(121, 121, 121); font-family: 'Lucida Sans Regular'; font-size: large; padding: 2%; box-shadow: 0px 0px 3px 0px; text-align: center; } #flex-1:hover #job-descriptor-1 { display: block; }

 <div class="flex-container"> <div id="flex-1" class="flex-container-content">Police <div id="job-descriptor-1"> Hello there, top of the morning to you. </div> </div> <div class="flex-container-content">Fast Food</div> <div class="flex-container-content">Trucker</div> <div class="flex-container-content">Drug Dealer</div> <div class="flex-container-content">Post Office Curier</div> <div class="flex-container-content">Fisherman</div> </div>

Answer 2

正如@TJ 提到的，如果隐藏元素（ #job-descriptor-1 ）在悬停元素内，则只有纯 css 才有可能。

 .flex-container { display: flex; background-color: white; margin-left: 5%; position: relative; }.flex-container-content { background: black; color: white; margin: 1%; font-family: 'Lucida Sans Regular'; font-size: x-large; padding: 1% 2% 1% 2%; border-radius: 5px; }.flex-container-content:hover{ display: block; background: rgb(34, 34, 34); cursor: pointer; color: rgb(175, 175, 175) } #job-descriptor-1 { display: none; position: absolute; top: 100%; left: -5%; width: 100vw; color: rgb(218, 218, 218); background: rgb(121, 121, 121); font-family: 'Lucida Sans Regular'; font-size: large; padding: 2%; box-shadow: 0px 0px 3px 0px; text-align: center; } #flex-1:hover #job-descriptor-1{ display: block; }

 <div class="flex-container"> <div id="flex-1" class="flex-container-content"> Police <div id="job-descriptor-1"> Hello there, top of the morning to you. </div> </div> <div class="flex-container-content">Fast Food</div> <div class="flex-container-content">Trucker</div> <div class="flex-container-content">Drug Dealer</div> <div class="flex-container-content">Post Office Curier</div> <div class="flex-container-content">Fisherman</div> </div>

---

但是，如果您想要所有悬停目标 ( .flex-container-content ) 的 hover 效果，您必须使用 javascript。 您将mouseover和mouseout悬停的 for 循环事件侦听器附加到每个悬停目标。 调用的处理程序（匿名函数）更改隐藏元素的显示属性。

工作示例：

 const hover_targets = document.querySelectorAll('.flex-container-content'); for(i = 0; i < hover_targets.length; i++) { hover_targets[i].addEventListener('mouseover', function() { document.querySelector('#job-descriptor-1').style.display = 'block'; }); hover_targets[i].addEventListener('mouseout', function() { document.querySelector('#job-descriptor-1').style.display = 'none'; }); }

 .flex-container { display: flex; background-color: white; margin-left: 5%; }.flex-container-content { background: black; color: white; margin: 1%; font-family: 'Lucida Sans Regular'; font-size: x-large; padding: 1% 2% 1% 2%; border-radius: 5px; }.flex-container-content:hover{ display: block; background: rgb(34, 34, 34); cursor: pointer; color: rgb(175, 175, 175) } #job-descriptor-1 { display: none; color: rgb(218, 218, 218); background: rgb(121, 121, 121); font-family: 'Lucida Sans Regular'; font-size: large; padding: 2%; box-shadow: 0px 0px 3px 0px; text-align: center; }

 <div class="flex-container"> <div id="flex-1" class="flex-container-content">Police</div> <div class="flex-container-content">Fast Food</div> <div class="flex-container-content">Trucker</div> <div class="flex-container-content">Drug Dealer</div> <div class="flex-container-content">Post Office Curier</div> <div class="flex-container-content">Fisherman</div> </div> <div id="job-descriptor-1"> Hello there, top of the morning to you. </div>

---

如果您将 jQuery 用于您的页面，则代码会变得更加简单。

工作示例：

 $('.flex-container-content').on('mouseover', function() { $('#job-descriptor-1').show(); }); $('.flex-container-content').on('mouseout', function() { $('#job-descriptor-1').hide(); });

 .flex-container { display: flex; background-color: white; margin-left: 5%; }.flex-container-content { background: black; color: white; margin: 1%; font-family: 'Lucida Sans Regular'; font-size: x-large; padding: 1% 2% 1% 2%; border-radius: 5px; }.flex-container-content:hover{ display: block; background: rgb(34, 34, 34); cursor: pointer; color: rgb(175, 175, 175) } #job-descriptor-1 { display: none; color: rgb(218, 218, 218); background: rgb(121, 121, 121); font-family: 'Lucida Sans Regular'; font-size: large; padding: 2%; box-shadow: 0px 0px 3px 0px; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex-container"> <div id="flex-1" class="flex-container-content">Police</div> <div class="flex-container-content">Fast Food</div> <div class="flex-container-content">Trucker</div> <div class="flex-container-content">Drug Dealer</div> <div class="flex-container-content">Post Office Curier</div> <div class="flex-container-content">Fisherman</div> </div> <div id="job-descriptor-1"> Hello there, top of the morning to you. </div>