Есть ли способ, которым я могу применить размытие ко всему, кроме того, что наведена моя мышь? - PullRequest
Новая
       2

Есть ли способ, которым я могу применить размытие ко всему, кроме того, что наведена моя мышь?

0 голосов
/ 13 января 2020

Итак, у меня есть эта функция, где я могу навести курсор мыши на небольшой элемент div, и он увеличивается с дополнительной информацией о topi c под рукой. Мне интересно, могу ли я применить размытие к остальной части страницы, а не к тому диву, на который я смотрю. любая помощь будет потрясающей! 

/* Simple hover code */
.skill-category-card {
  background-color: rgba(68, 79, 83, 0.68);
  width:260px;
  height:260px;
  text-align: center;
  border-radius: 5%;
  margin:50px;
  padding:0;
  float:left;
  transition: all 0.4s ease-in-out;
}
.skill-category-card:hover {
  margin:30px;
  width:300px;
  height:300px;
}
<!-- The divs I want to hover over -->

<div class="skill-category-card" id="web-des-skills">
          <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3>Web Design</h3>
        </div>
        <div class="skill-category-card" id="web-dev-skills">
          <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Web Development</h3>
        </div>
        <div class="skill-category-card" id="gfx-skills">
          <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Graphic<br />Design</h3>
        </div>
        <div class="skill-category-card" id="sfx-skills">
          <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Sound<br />Design</h3>
        </div>

Ответы [ 3 ]

0 голосов
/ 13 января 2020

Итак, небольшая реструктуризация вашего HTML необходима для реализации наведения на «Все, кроме» .

Обертки container класса требуется для обнаружения наведения, и затем blur * * * * * * * * * * * * * * * *. 

/* Simple hover code */
.skill-category-card {
  background-color: rgba(68, 79, 83, 0.68);
  width: 260px;
  height: 260px;
  text-align: center;
  border-radius: 5%;
  margin: 50px;
  padding: 0;
  float: left;
  transition: all 0.4s ease-in-out;
}

.skill-category-card:hover {
  margin: 30px;
  width: 300px;
  height: 300px;
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.container:hover > *:not(:hover) {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
<!-- The divs I want to hover over -->

<div class="container">
  <div class="skill-category-card" id="web-des-skills">
    <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3>Web Design</h3>
  </div>
  <div class="skill-category-card" id="web-dev-skills">
    <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Web Development</h3>
  </div>
  <div class="skill-category-card" id="gfx-skills">
    <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Graphic<br />Design</h3>
  </div>
  <div class="skill-category-card" id="sfx-skills">
    <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
    <h3 style="line-height:28px;">Sound<br />Design</h3>
  </div>
</div>

Известный фрагмент кода CSS выглядит следующим образом: 

.container:hover > *:not(:hover) {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

По существу, что это делает:

  1. Если внешний контейнер hover -ed over (.container:hover)
  2. Для всех дочерних элементов (> *)
  3. Какие not hover -ed более (:not(:hover))
  4. Выполнить blur (filter: blur(8px) и -webkit-filter: blur(8px))

См. JSFiddle для справки.

Дайте мне знать, как вы go с этим!

0 голосов
/ 13 января 2020

Если вы хотите, чтобы jquery, html и css размыли остальную часть страницы. 

     $( ".test" ).on({
          click: function() {
            $( this ).toggleClass( "div.test" );
          }, mouseenter: function() {
            $( this ).addClass( "inside" );    
          }, mouseleave: function() {
            $( this ).removeClass( "inside" );
          }
        });
    .skill-category-card{
     position: relative;
     z-index: 2;
     background-color: rgba(68, 79, 83, 0.68);
     width:260px;
     height:260px;
     text-align: center;
     border-radius: 5%;
     margin:50px;
     padding:0;
     float:left;
     transition: all 0.4s ease-in-out;
}
 .skill-category-card:hover {
     position:relative;
     z-index: 2;
     margin:30px;
     width:300px;
     height:300px;
}
 .test {
     position: absolute;
     z-index: 1!important ;
     width:1000px;
     height:3000px;
     color: #000;
     padding: .5em;
     border: 1px solid #444;
}
 .inside {
     z-index: 1 ;
     background-color:rgba(0, 0, 0, 0.5);
     filter: blur(1px);
}
         
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- The divs I want to hover over -->
<div class= "test">If you hover here blurs and overlays.</div>
<div class="skill-category-card" id="web-des-skills">
          <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3>Web Design</h3>
        </div>
        <div class="skill-category-card" id="web-dev-skills">
          <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Web Development</h3>
        </div>
        <div class="skill-category-card" id="gfx-skills">
          <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Graphic<br />Design</h3>
        </div>
        <div class="skill-category-card" id="sfx-skills">
          <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Sound<br />Design</h3>
        </div>
0 голосов
/ 13 января 2020

Я проверил это с firefox, но этот CSS на самом деле делает то, что вы хотите .... 

.skill-category-card {
  background-color: rgba(68, 79, 83, 0.68);
  width:260px;
  height:260px;
  text-align: center;
  border-radius: 5%;
  margin:50px;
  padding:0;
  float:left;
  transition: all 0.4s ease-in-out;
}
body:hover {
  background: yellow;
}
.skill-category-card:hover {
transform: scale(1.5,1.5);
background: white;
}
<body>
<div class="skill-category-card" id="web-des-skills">
          <i class="fas fa-pencil-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3>Web Design</h3>
        </div>
        <div class="skill-category-card" id="web-dev-skills">
          <i class="far fa-file-code" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Web Development</h3>
        </div>
        <div class="skill-category-card" id="gfx-skills">
          <i class="far fa-image" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Graphic<br />Design</h3>
        </div>
        <div class="skill-category-card" id="sfx-skills">
          <i class="fas fa-headphones-alt" style="font-size:128px; position:absolute; margin:0; padding:0; transform:translate(-50%,25%);"></i>
          <h3 style="line-height:28px;">Sound<br />Design</h3>
        </div>

Примечание: я изменил эффект наведения на преобразование.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...