时间戳

首页 > 解决方案 > 在悬停时使背景变暗

html - 在悬停时使背景变暗

问题描述

再次为我的网站，我想在一个 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 的剪切。
谢谢

标签： htmlcsssass

解决方案

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

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

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

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

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

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

推荐阅读