在新标签页中打开链接会使其焦点状态处于活动状态

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浏览您的网页并希望更改焦点的用户以外，上述解决方案（主动而不是关注）是好的。 BTW-页面刷新是焦点元素仍然有效的另一种情况。我使用具有相同焦点/活动/悬停效果的类似按钮的元素来进行此操作，并且我注意到在刷新页面后仍保留了焦点按钮，这使我回到了“原始状态”。不仅焦点元素引起误解（不是主页按钮），而且在悬停的任何其他按钮上我都得到了第二个突出显示效果，直到单击了使事物恢复同步的东西。