模糊影响不适用于“悬停”元素上方的元素

Question

​

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
.layer1{
    transition: 1s;
}

.layer2{
    transition : 1s;
}

.layer1:hover ~ .layer2 {
    filter: blur(10px)
}

.layer1:hover {
    box-shadow: 0 25px 60px rgba(0,0,0,.8);
}

<h1 class="layer1 layer2">Using The transition Shorthand Property</h1>

<p class="layer1 layer2">Hover over the div element below, to see the transition effect:</p>

<div class="layer1 layer2"></div>

<p class="layer1 layer2"><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

<p class="layer1 layer2"><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

​

codepen

我在一个页面中有多个元素，我想添加模糊效果。当我悬停在顶部元素时，所有其他元素都变得模糊了(这是正确的)。但是当我将鼠标悬停在第二个元素上时，它上面的元素并没有变得模糊，但它下面的元素却变得模糊了。

请为我提供这个问题的解决方案。

Answer 1

我想出了一个解决方案。但是更改了类和标识符。

下面是HTML：

<div class=content>
<h1 class="element">Using The transition Shorthand Property</h1>
<p class="element">Hover over the div element below, to see the transition effect:</p>
<div id="widen" class="element"></div>

<p class="element"><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

<p class="element"><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</div>

和CSS：

    #widen {
    background: red;
    width: 100px;
    height: 100px;
    transition: width 2s linear 1s;
    }

    #widen:hover {
    width: 300px;
    }

    .element:hover, #widen:hover {
    transition: 1s;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .8);
    }

    .content:hover .element {
    filter: blur(5px);
    }

    .content .element:hover {
    filter: blur(0);
    }