如何将样式应用于 div 但不是它包含的样式 [重复]

Question

我有一个表格和一个 div 里面的一些文本，当你在它周围悬停时，它会从顶部下降，我想做的是让它下降时，它会使它后面的所有东西变得模糊和有点暗，我已经设法用

完成了较暗的部分

background-color: rgba(0,0,0,0.05)

但现在我不知道如何在不使表单和文本也模糊的情况下使其模糊。

（我想让nameInsert id div背景模糊）

这是我的html：

<div id="nameInsert" class="nameInsert"> 
    <div id="nameList" class="nameList">
        <div id="boyNameList" class="boyNameList"></div>
        <div id="girlNameList" class="girlNameList"></div>
    </div>

    <div id="addNames" style="display: table-row;">
        <!-- DIVS WITH STYLES USED TO PLACE THEM SIDE BY SIDE -->
        <div class="boyForm">
            <form onsubmit="addBoyName(); return false">
                <label for="boyName"></label>
                <input type="text" name="boyName" id="boyName" placeholder="add guy" required>
            </form>
        </div>

这是我的 CSS：

.nameInsert{
    background-color: black;
    background-color: rgba(0, 0, 0, 0.05);
}

.nameList{
    margin-left: 3vw;
    margin-right: 3vw;
}

.boyNameList{
    width: 100%;
    display: table-cell;

    font-family: 'mesloBold';
}

谢谢:)

Answer 1

你的 HTML 没有 div 关闭现在我已经完成了你可以使用我的代码我希望你想要这种风格

.nameInsert {
  width: 100px;
  height: 100px;
  background-color: black;
  filter: blur(5px);
  opacity: 0.5;
}

.nameList {
  margin-left: 3vw;
  margin-right: 3vw;
}

.boyNameList {
  width: 100%;
  display: table-cell;

  font-family: 'mesloBold';
}

<div id="nameInsert" class="nameInsert">
    <div id="nameList" class="nameList">
      <div id="boyNameList" class="boyNameList"></div>
      <div id="girlNameList" class="girlNameList"></div>
    </div>
  </div>

  <div id="addNames" style="display: table-row;">
    <!-- DIVS WITH STYLES USED TO PLACE THEM SIDE BY SIDE -->
    <div class="boyForm">
      <form onsubmit="addBoyName(); return false">
        <label for="boyName"></label>
        <input type="text" name="boyName" id="boyName" placeholder="add guy" required>
      </form>
    </div>