fix(Anchor:) fixes anchor modifier .dnb-anchor--no-hover

packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap

@@ -263,6 +263,9 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-p .dnb-anchor, .dnb-lead .dnb-anchor, .dnb-h--xx-large .dnb-anchor, .dnb-h--x-large .dnb-anchor, .dnb-h--large .dnb-anchor, .dnb-h--medium .dnb-anchor, .dnb-h--basis .dnb-anchor, .dnb-h--small .dnb-anchor, .dnb-h--x-small .dnb-anchor {
   font-size: inherit;
 }
+[data-visual-test-wrapper] .dnb-anchor {
+  transition: none;
+}
 .dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
@@ -276,16 +279,20 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-anchor:focus-visible, .dnb-section .dnb-anchor:focus-visible.dnb-anchor {
   text-decoration: none;
 }
-.dnb-anchor:hover {
+.dnb-anchor:active {
+  border-radius: 0.25em;
   border-radius: 0.25em;
 }
-.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor {
+.dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
   text-decoration: none;
 }
-.dnb-anchor:active {
+.dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
+  text-decoration: none;
+}
+.dnb-anchor:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) {
   border-radius: 0.25em;
 }
-.dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
+.dnb-anchor:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style), .dnb-section .dnb-anchor:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style).dnb-anchor {
   text-decoration: none;
 }
 .dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon) {
@@ -313,9 +320,6 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon)::after {
   top: 0.125em;
 }
-[data-visual-test-wrapper] .dnb-anchor {
-  transition: none;
-}
 .dnb-anchor .dnb-icon {
   display: inline-block;
   transform: translateY(-0.0625em);
@@ -357,7 +361,6 @@ sup .dnb-anchor, sub .dnb-anchor {
   text-decoration: none;
 }
 .dnb-anchor--no-style:hover {
-  color: inherit;
   background-color: transparent;
 }
 
@@ -366,7 +369,6 @@ sup .dnb-anchor, sub .dnb-anchor {
 }
 
 .dnb-anchor--no-hover:hover {
-  color: inherit;
   background-color: transparent;
 }
 
@@ -567,17 +569,17 @@ exports[`Anchor scss has to match theme css for ui 1`] = `
 .dnb-anchor {
   color: var(--color-sea-green);
 }
-.dnb-anchor:hover {
-  color: var(--color-sea-green);
-  box-shadow: inset 100vw 100vw 0 0 var(--color-mint-green-50), -0.125em 0 0 0 var(--color-mint-green-50), 0.125em 0 0 0 var(--color-mint-green-50);
-}
 .dnb-anchor:active {
   color: var(--color-mint-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-emerald-green), -0.125em 0 0 0 var(--color-emerald-green), 0.125em 0 0 0 var(--color-emerald-green);
 }
 .dnb-anchor:focus-visible {
   color: var(--color-sea-green);
 }
+.dnb-anchor:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) {
+  color: var(--color-sea-green);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-mint-green-50), -0.125em 0 0 0 var(--color-mint-green-50), 0.125em 0 0 0 var(--color-mint-green-50);
+}
 
 .dnb-anchor--hover {
   color: var(--color-sea-green);

packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss

@@ -59,8 +59,6 @@
 
 @mixin resetAnchorHoverStyle() {
   &:hover {
-    color: inherit;
-
     // in case we don't want to change the color to the body color
     background-color: transparent;
   }
@@ -183,17 +181,22 @@
 @mixin anchorStyle() {
   @include anchorDefaultStyle();
 
+  [data-visual-test-wrapper] & {
+    transition: none;
+  }
+
   // have focus before :active, because of border-radius
   &:focus-visible {
     @include anchorFocusStyle();
   }
 
-  &:hover {
+  &:active {
     @include anchorHoverStyle();
+    @include anchorActiveStyle();
   }
 
-  &:active {
-    @include anchorActiveStyle();
+  &:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) {
+    @include anchorHoverStyle();
   }
 
   &[target='_blank']:not(:empty, .dnb-anchor--no-icon) {

packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss

@@ -3,11 +3,6 @@
 @mixin anchorStyle() {
   color: var(--color-sea-green);
 
-  &:hover {
-    color: var(--color-sea-green);
-    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
-  }
-
   &:active {
     color: var(--color-mint-green);
     @include anchor-mixins.anchorBackground(var(--color-emerald-green));
@@ -16,6 +11,11 @@
   &:focus-visible {
     color: var(--color-sea-green);
   }
+
+  &:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) {
+    color: var(--color-sea-green);
+    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
+  }
 }
 
 $useClasses: true !default;