模糊除悬停的所有元素

Question

我有一个专为明天设计的项目（网站），我想添加一些样式，但是除了飞越的div之外，我似乎无法模糊div的所有元素：/

这是我的代码：

.projetsdiv
{
    height: 60vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 25%;
  justify-content: space-evenly;
    margin-bottom: 50px;
    margin-top: 150px;
    align-items: center;
}
 
.isn, .tpe, .ppp
{
    width: 25%;
    align-items: center;
}
 
.isn:hover, .tpe:hover, .ppp:hover
{
  transform: scale(1.25);
}
 
#ppp-dl:hover, #ppp-pdf:hover, #tpe-dl:hover, #tpe-pdf:hover, #isn-dl:hover, #isn-pdf:hover
{
  transform: scale(1.1);
  cursor: pointer;
}
 
 
#ppp, #tpe, #isn
{
    width: 100%;
    height: 300px;
    border: solid 3px black;
    border-radius: 15px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
 
#ppp
{
    background-image: url("/images/ppp.jpg");
}
#tpe
{
    background-image: url("/images/tpe.jpg");
}
#isn
{
    background-image: url("/images/isn.jpeg");
}
 
.ppp-bouttons, .isn-bouttons, .tpe-bouttons
{
 
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-basis: 48%;
    margin-top: 10px;
}
 
#ppp-dl, #tpe-dl, #isn-dl, #ppp-pdf, #tpe-pdf, #isn-pdf
{
    background-position: center;
    border: solid 3px black;
    background-size: 50px;
    background-repeat: no-repeat;
    width: 47%;
    border-radius: 15px;
    background-color: #292929cc;
 
}
 
#ppp-dl, #tpe-dl, #isn-dl
{
    background-image: url("/images/dl-claire.png");
}
 
#ppp-pdf, #tpe-pdf, #isn-pdf
{
    background-image: url("/images/pdf-claire.png");
}
 
p
{
    font-size: 50px;
    color: #bababa;
    font-family: Montserrat;
    font-weight: bold;
    text-align: center;
}
 
.div-text
{
    border-bottom: solid 3px black;
    backdrop-filter: blur(10px);
    background-color: #2929299e;
    height:70px;
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
     
}

<div class="projetsdiv">
     
    <div class="ppp">
        <div id="ppp">
            <div class="div-text">
                 <p> MON PPP </p>
            </div>
        </div>
        <div class="ppp-bouttons">
             
            <div id="ppp-dl" onclick="window.open('#','PPP');"></div>
            <div id="ppp-pdf" onclick="window.open('#','PDF PPP');"></div>
        </div>
    </div>
     
     
    <div class="tpe">
        <div id="tpe">
            <div class="div-text">
                 <p> MON TPE </p>
            </div>
        </div>
        <div class="tpe-bouttons">
            <div id="tpe-dl" onclick="window.open('#','TPE');"></div>
            <div id="tpe-pdf" onclick="window.open('#','PDF TPE');"></div>
        </div>
    </div>
         
    <div class="isn">
        <div id="isn">
            <div class="div-text">
                 <p> MON ISN </p>
            </div>
        </div>
        <div class="isn-bouttons">
            <div id="isn-dl" onclick="window.open('#','ISN');"></div>
            <div id="isn-pdf" onclick="window.open('#','PDF ISN');"></div>
        </div>
    </div>
 
 
</div>

通过此代码，我设法部分得到了我想要的东西：

.projetsdiv:hover > *:not(*:hover)
{
  filter: blur(10px);
}

或者此代码模糊了div，但仅模糊了以下代码：

.projetsdiv > *:hover ~ *:not(*:hover)
{
    filter: blur(10px);
}

Answer 1

如何使它们最初保持模糊，并在悬停时消除模糊？

.projetsdiv
{
    height: 60vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 25%;
  justify-content: space-evenly;
    margin-bottom: 50px;
    margin-top: 150px;
    align-items: center;
}
 
.isn, .tpe, .ppp
{
    width: 25%;
    align-items: center;
}
 
.isn:hover, .tpe:hover, .ppp:hover
{
  transform: scale(1.25);
}
 
#ppp-dl, #ppp-pdf, #tpe-dl, #tpe-pdf, #isn-dl, #isn-pdf{
  filter: blur(5px);
}
#ppp-dl:hover, #ppp-pdf:hover, #tpe-dl:hover, #tpe-pdf:hover, #isn-dl:hover, #isn-pdf:hover
{
  transform: scale(1.1);
  cursor: pointer;
  filter: blur(0px);
}
 
 
#ppp, #tpe, #isn
{
    width: 100%;
    height: 300px;
    border: solid 3px black;
    border-radius: 15px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
 
#ppp
{
    background-image: url("/images/ppp.jpg");
}
#tpe
{
    background-image: url("/images/tpe.jpg");
}
#isn
{
    background-image: url("/images/isn.jpeg");
}
 
.ppp-bouttons, .isn-bouttons, .tpe-bouttons
{
 
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-basis: 48%;
    margin-top: 10px;
}
 
#ppp-dl, #tpe-dl, #isn-dl, #ppp-pdf, #tpe-pdf, #isn-pdf
{
    background-position: center;
    border: solid 3px black;
    background-size: 50px;
    background-repeat: no-repeat;
    width: 47%;
    border-radius: 15px;
    background-color: #292929cc;
 
}
 
#ppp-dl, #tpe-dl, #isn-dl
{
    background-image: url("/images/dl-claire.png");
}
 
#ppp-pdf, #tpe-pdf, #isn-pdf
{
    background-image: url("/images/pdf-claire.png");
}
 
p
{
    font-size: 50px;
    color: #bababa;
    font-family: Montserrat;
    font-weight: bold;
    text-align: center;
}
 
.div-text
{
    border-bottom: solid 3px black;
    backdrop-filter: blur(10px);
    background-color: #2929299e;
    height:70px;
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
     
}

<div class="projetsdiv">
     
    <div class="ppp">
        <div id="ppp">
            <div class="div-text">
                 <p> MON PPP </p>
            </div>
        </div>
        <div class="ppp-bouttons">
             
            <div id="ppp-dl" onclick="window.open('#','PPP');"></div>
            <div id="ppp-pdf" onclick="window.open('#','PDF PPP');"></div>
        </div>
    </div>
     
     
    <div class="tpe">
        <div id="tpe">
            <div class="div-text">
                 <p> MON TPE </p>
            </div>
        </div>
        <div class="tpe-bouttons">
            <div id="tpe-dl" onclick="window.open('#','TPE');"></div>
            <div id="tpe-pdf" onclick="window.open('#','PDF TPE');"></div>
        </div>
    </div>
         
    <div class="isn">
        <div id="isn">
            <div class="div-text">
                 <p> MON ISN </p>
            </div>
        </div>
        <div class="isn-bouttons">
            <div id="isn-dl" onclick="window.open('#','ISN');"></div>
            <div id="isn-pdf" onclick="window.open('#','PDF ISN');"></div>
        </div>
    </div>
 
 
</div>

Answer 2

从技术上讲，您可以使用以下代码：

.projetsdiv:hover > div:not(:hover) {
  filter: blur(5px)
}

但这不是理想的-如果您向项目中添加更多元素，它的行为会很奇怪，因此通常不要在主要父元素上执行此操作，而应该在容器元素上执行要受模糊影响的元素的操作

在此处查看实际操作：

.projetsdiv {
  height: 60vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 25%;
  justify-content: space-evenly;
  margin-bottom: 50px;
  margin-top: 150px;
  align-items: center;
}

.isn,
.tpe,
.ppp {
  width: 25%;
  align-items: center;
}

.isn:hover,
.tpe:hover,
.ppp:hover {
  transform: scale(1.25);
}

#ppp-dl:hover,
#ppp-pdf:hover,
#tpe-dl:hover,
#tpe-pdf:hover,
#isn-dl:hover,
#isn-pdf:hover {
  transform: scale(1.1);
  cursor: pointer;
}

#ppp,
#tpe,
#isn {
  width: 100%;
  height: 300px;
  border: solid 3px black;
  border-radius: 15px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#ppp {
  background-image: url("/images/ppp.jpg");
}

#tpe {
  background-image: url("/images/tpe.jpg");
}

#isn {
  background-image: url("/images/isn.jpeg");
}

.ppp-bouttons,
.isn-bouttons,
.tpe-bouttons {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-basis: 48%;
  margin-top: 10px;
}

#ppp-dl,
#tpe-dl,
#isn-dl,
#ppp-pdf,
#tpe-pdf,
#isn-pdf {
  background-position: center;
  border: solid 3px black;
  background-size: 50px;
  background-repeat: no-repeat;
  width: 47%;
  border-radius: 15px;
  background-color: #292929cc;
}

#ppp-dl,
#tpe-dl,
#isn-dl {
  background-image: url("/images/dl-claire.png");
}

#ppp-pdf,
#tpe-pdf,
#isn-pdf {
  background-image: url("/images/pdf-claire.png");
}

p {
  font-size: 50px;
  color: #bababa;
  font-family: Montserrat;
  font-weight: bold;
  text-align: center;
}

.div-text {
  border-bottom: solid 3px black;
  backdrop-filter: blur(10px);
  background-color: #2929299e;
  height: 70px;
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.projetsdiv:hover > div:not(:hover) {
  filter: blur(5px)
}

<div class="projetsdiv">

  <div class="ppp">
    <div id="ppp">
      <div class="div-text">
        <p> MON PPP </p>
      </div>
    </div>
    <div class="ppp-bouttons">

      <div id="ppp-dl" onclick="window.open('#','PPP');"></div>
      <div id="ppp-pdf" onclick="window.open('#','PDF PPP');"></div>
    </div>
  </div>


  <div class="tpe">
    <div id="tpe">
      <div class="div-text">
        <p> MON TPE </p>
      </div>
    </div>
    <div class="tpe-bouttons">
      <div id="tpe-dl" onclick="window.open('#','TPE');"></div>
      <div id="tpe-pdf" onclick="window.open('#','PDF TPE');"></div>
    </div>
  </div>

  <div class="isn">
    <div id="isn">
      <div class="div-text">
        <p> MON ISN </p>
      </div>
    </div>
    <div class="isn-bouttons">
      <div id="isn-dl" onclick="window.open('#','ISN');"></div>
      <div id="isn-pdf" onclick="window.open('#','PDF ISN');"></div>
    </div>
  </div>


</div>

Answer 3

向三个div中的每一个添加新的类 .blur

Seq Scan

然后您可以使用jquery进行更改

<div class="ppp blur">
   ...
</div>
<div class="tpe blur">
   ...
</div>
<div class="isn blur">
   ...
</div>

Here is a pen with these changes in place