<分区>
我遇到了一个只在 Safari 中出现的问题 - 当我将鼠标悬停在标题中的链接上时，悬停在该链接右侧的链接全部更改大小(它们的字体粗细似乎变小了)链接悬停动画的持续时间，然后一旦动画完成，链接将返回其原始大小/重量。非常奇怪的是，它只影响鼠标悬停的链接右侧(代码下方)的链接。
这是一张图片:
在图片中可以看到'game history'右边的链接比'game history'左边的链接要小(game history是图中悬停的链接)。它在发生时比在图像中更引人注目。
这是我的代码:
<ul class="nav_links_list">
<li>
<div><a class="head_link-nukun head_link--nukun" href="index.php"><span>H</span>ome</a></div>
</li>
<li>
<div><a class="head_link-nukun head_link--nukun" href="user_choice.php">Make Picks</a></div>
</li>
<li>
<div><a class="head_link-nukun head_link--nukun" href="game_history_calendar.php">Game History</a></div>
</li>
<li>
<a class="head_link-nukun head_link--nukun" href="userchoice_history.php?username=<?php echo $_COOKIE['username']; ?>">My History</a>
</li>
<li>
<a class="head_link-nukun head_link--nukun" href="full_leaderboard.php">Full Leaderboard</a>
</li>
<li>
<a class="head_link-nukun head_link--nukun" href="account_settings.php">Account Settings</a>
</li>
</ul>
这是涉及的 CSS:
/* Header Nukun link styles */
.head_link-nukun {
outline: none;
text-decoration: none;
position: relative;
font-size: 10pt;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
.head_link--nukun {
/*color: #E3E8DC;*/
color:#EEEEEE;
/*font-weight: 900;*/
text-transform: uppercase;
overflow: hidden;
padding: 10px 0;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.head_link--nukun:hover {
color: #F51E0A;
}
.head_link--nukun::before,
.head_link--nukun::after {
content: '';
position: absolute;
width: 70%;
height: 2px;
background: #EEEEEE;
bottom: 0;
left: 15%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.head_link--nukun::after {
background: #00B4FF;
-webkit-transform: translate3d(-300%,0,0) scale3d(0,1,1);
transform: translate3d(-300%,0,0) scale3d(0,1,1);
}
.head_link--nukun:hover::before {
-webkit-transform: translate3d(300%,0,0) scale3d(0,1,1);
transform: translate3d(300%,0,0) scale3d(0,1,1);
}
.head_link--nukun:hover::after {
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}
.head_link--nukun span {
color: #00B4FF;
display: inline-block;
position: relative;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
transform: perspective(1000px) rotate3d(0,1,0,0deg);
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
transition: transform 0.5s, color 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.head_link--nukun:hover span {
color: #EEEEEE;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,180deg);
transform: perspective(1000px) rotate3d(0,1,0,180deg);
}
即使鼠标悬停在 Firefox 中，链接也能完美显示。我只在 Safari 中看到这个问题。任何帮助将不胜感激!