在新选项卡中打开链接会使其焦点状态处于活动状态

Question

>问题

我有一个具有以下样式的锚标签：

a {
  color: #E91E63;
  &:focus,
  &:hover {
    color: #2196F3;
  }
}

当我使用右键单击并选择在新选项卡中打开链接时，链接保持焦点状态颜色。我宁愿链接不保持焦点并返回到默认颜色#E91E63。

我可以将焦点样式设置为#E91E63，但我希望当用户点击链接时#2196F3移动设备。

演示

下面是一个 JSFiddle： https://jsfiddle.net/todkLvfp/

问题

有没有办法在不使用JS的情况下删除此焦点状态或重置颜色？

Answer 1

a {  
  &:link,          
  &:visited {   
    color: #E91E63;  
   }  
  &:hover {
    color: #2196F3;
   }
}

使用此样式。在新选项卡中打开链接后，颜色将重置为正常。

Answer 2

你应该使用:active而不是:focus。锚标记在单击时处于活动状态，但在释放鼠标按钮时会返回到其原始状态。

a, a:visited {
  color: #E91E63;
}
a:hover, a:active {
  color: #2196F3;
}

Answer 3

解决方案是将:not与!important一起使用

a {
  &:not(:hover),
  &:not(:focus) {
    color: #E91E63 !important;
  }
  &:focus,
  &:hover {
    color: #2196F3;
  }
}

Answer 4

我相信JS是必要的。上述解决方案(活动而不是焦点(很好，除了通过您的网页 TAB 键并希望体验焦点变化的用户。顺便说一句，页面刷新是焦点元素保持有效的另一种情况。我使用具有相同焦点/活动/悬停效果的类似按钮的元素，我注意到在刷新页面后焦点按钮仍然存在，这使我回到了"家乡状态"。不仅聚焦元素具有误导性(不是主页按钮(，而且我在悬停在任何其他按钮上获得了第二个高光效果，直到我单击了使事情恢复同步的内容。