再次对于我的网站，我想将鼠标悬停在 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 的剪切。
谢谢
我看到文本在你已经解决的那一边被剪掉了。
所以，这是深色背景的解决方案。
首先，在.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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句