在悬停时使背景变暗

Question

再次对于我的网站，我想将鼠标悬停在 div 类上，当您将光标放在它上面时，他的比例会变大，我归档了这个，现在我希望它像一个“！重要”原因一样添加您可以在这里尝试：http://stefanspeter.fr/about-test.html，例如，中间的 div 将他的文本剪切放在一边。我想先解决这个问题，然后我想把这个窗口周围的所有东西都变暗，公平地说，我不知道如何做到这一点。

我尝试添加一个 !important 标记，但不知道它是否会起作用，而我所做的方式实际上并没有起作用。 这是我现在使用的代码：

.job {
  background: #515151;
  padding: 0.5rem;
  border-bottom: #eece1a 5px solid;
}

.jobzoom:hover {
  transform: scale(1.2);
  font-size: 22px;
}

<div class="job jobzoom col-sm">
  <h3>Alternance chez <a class="link-2 about-link" href="www.hb-digit.com" target="_blank">HB-Digit</a> et <a class="link-2 about-link" href="https://www.efficom-lille.fr/" target="_blank">Efficom</a></h3>
  <hr class="about-hr" />
  <h4 class="text-secondary">Août 2019 - Août 2020</h4>
  <hr class="about-hr" />
  <p>
    Je suis actuellement en alternance chez HB-Digit sous l'école supérieur Efficom.<br /> Mes principales missions :
    <ul>
      <li>Développement de services web (Drupal8, php, bootstrap, twig, JS, jQuery...)</li>
      <li>Gestion relation client via méthode Agile (Jira)</li>
      <li>Etablissement et respect des cahiers des charges</li>
    </ul>
  </p>

实际输出：悬停得到正确的比例
预期：在悬停时使背景变暗，阻止周围其他 div 的剪切。
谢谢

Answer 1

我看到你已经解决的那一侧的文字被剪掉了。
所以，这里是深色背景的解决方案。

首先，在.about-info 元素中添加一个div 作为最后一个。对它使用.dark-element 类：

<div class="about-info">
    <!-- ... --> 
    <div class="dark-screen"></div>
</div>

然后，让我们添加 CSS 以创建效果。

你要把它固定，填满整个屏幕，如果没有.job元素悬停，则不可见，但当任何元素悬停时会出现。
所以我们可以使用一些属性，如transition、visibility、point-events 和opacity。此外，选择器~ 选择兄弟姐妹（在元素之后，这就是我们将其放在末尾的原因）将非常有用：

.dark-screen {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    background: black;
    pointer-events: none;
    transition: 0.76s;
    opacity: 0;
}
.job:hover ~ .dark-screen {
    visibility: visible;
    opacity: 0.6;
}