使用CSS将外部div悬停在外部div上

2024-05-03 • 问答

我已经尝试了很长时间才能使其正常工作。 “ Mehr erfahren”下的“ line”应该从0％变为100％，但我从100％变为0％。谁能找到错误？

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136,155,166,0.4);
 
}


.lwb-col--link {
  	font-weight: 500;
	position: relative;
	display: inline-block;
}
.lwb-col--link::after{
    border-bottom: 2px solid;
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
}
.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(0);
    transform-origin: left center;
}

<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur,sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

将Format 1: 555555555A,B9 Format 2: 7RB5J48DH58,B9移至默认状态。

将transform: scaleX(0);添加到悬停状态。

transform: scaleX(1);

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136,155,166,0.4);
 
}


.lwb-col--link {
  	font-weight: 500;
	position: relative;
	display: inline-block;
}
.lwb-col--link::after{
    border-bottom: 2px solid;
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
    transform: scaleX(0);
}
.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(1);
    transform-origin: left center;
}

编辑：我将border-bottom: 2px solid #E5E9EC;移到了.lwb-col--link，将border-bottom: 2px solid #57B0FB;添加到了.lwb-col:hover .lwb-col--link::after并使用了transform属性正常和悬停。它可以工作，但是底部边框的开头并不会消失，只是被覆盖。

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136,0.4);
}

.lwb-col--link {
    font-weight: 500;
    position: relative;
    display: inline-block;
    border-bottom: 2px solid #E5E9EC;
}
.lwb-col--link::after{
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
    transform: scaleX(0);
}

.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(1);
    transform-origin: left center;
    border-bottom: 2px solid #57B0FB;
}

<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur,sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

使用CSS将外部div悬停在外部div上

a20855737 回答：使用CSS将外部div悬停在外部div上

大家都在问