如何防止文本权重表单在转换期间更改为更粗体？最终结果两种方式都很好，但在转换过程中，文本变得更大胆。元素悬停后的元素会发生这种情况。例如。如果你将第二个事件悬停在时间轴上，第一个事件不受影响，但第二个事件本身和第三个事件。
HTML
<div class="timeline">
<ol>
<li>
<span class="date">Week 1</span>Event 1
</li>
<li>
<span class="date">Week 2</span>Event 2
</li>
<li>
<span class="date">Week 3</span>Event 3
</li>
</ol>
</div>
CSS
ol {
position: relative;
display: block;
margin: 100px;
margin-top: 150px;
height: 4px;
background: #24ad9e;
}
ol::after {
content: "";
position: absolute;
top: -8px;
display: block;
width: 0;
height: 0;
border-radius: 5px;
border: 10px solid #24ad9e;
right: -10px;
border: 10px solid transparent;
border-right: 0;
border-left: 20px solid #24ad9e;
border-radius: 3px;
}
.timeline ol li {
position: relative;
top: -76px;
left:-50px;
display: inline-block;
float: left;
width: 150px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
font: 14px "Lato" Helvetica Arial;
}
.timeline ol li::before {
content: "";
position: absolute;
top: 3px;
left: -29px;
display: block;
width: 6px;
height: 6px;
border: 4px solid #24ad9e;
background: #fff;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.date {
color: #000;
display: block;
margin-top: -17px;
}
/* Hover effects */
.timeline ol li:hover {
cursor: pointer;
color: #28e;
}
.timeline ol li:hover::before {
/*top: 1px;
left: -29px;
width: 6px;
height: 6px;*/
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/* transitions */
.timeline ol li::before, .timeline ol li:hover::before {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;