我不知道，但是由于某些原因，过渡似乎没有用。我正在测试此Google Chrome。
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:hover:before {
transform: translate(-50%, 0);
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
}
[data-title]:hover:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
}<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>谁能帮我解决问题，或者我错过了什么？
我什至尝试将过渡时间设置为+1秒，但仍然不能反映相同的情况。
您没有为原始状态设置任何内容，因此过渡不知道从何而来。如果您只想过渡项目的外观-例如淡入或淡出，则需要执行类似过渡不透明度的操作：
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:before {
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
transform: translate(-50%, 0);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:hover:before,
[data-title]:hover:after {
opacity: 1;
pointer-events: auto;
}<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句