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

Question

我一直在尝试制作一个弹性盒子，然后当弹性盒子内的内容悬停在上面时，会出现另一个盒子（在它下面，而不是旁边）。出于某种原因，当使用“flex-container”时，这是可行的。但我不希望当人们悬停在两者之间的空间上时发生这种情况。当尝试这样做并专门调用该类时，它是“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

您正在使用adjacent sibling selector (+)，这意味着您要定位的元素必须是其父元素的下一个元素 - 但#job-descriptor-1 在父元素之外 (flex-container)。目前在 CSS 中没有办法向上遍历。不使用 JavaScript 的唯一方法是将 #job-descriptor-1 移动到 flex-container 中的某个位置。

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

---

.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) 的悬停效果，则必须使用 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>