html - 使悬停时的背景变暗

Question

同样对于我的网站，我想在一个 div 类上悬停，当你将光标放在它上面时，他的比例会变大，我已经完成了这个，现在我希望它像一个 '!important' 原因一样添加你可以在这里试试: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。此外，选择器 ~ 来选择 sibling (在元素之后，这就是为什么我们把它放在最后)将非常有用:

.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;
}