# Hauptnavigation Rahmen (Focus) bei Mouse hover und click

**URL:** <https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651>\
**Category:** Shopware 6 (German)\
**Created:** [22. Juli 2025 um 17:02 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651 "2025-07-22T17:02:29Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![traktorenersatzteile](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@traktorenersatzteile](https://forum.shopware.com/u/traktorenersatzteile)\
**Post date:** [22. Juli 2025 um 17:02 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/1 "2025-07-22T17:02:29Z")

</div>

Hallo,  
die neue Funktion für die Barrierefreiheit scheint mit der Tastur sehr gut zu funktionieren, bei Bedienung mit der Mouse hätte ich allerdings diese ganzen Rahmen bei hover, focus und click gerne weg! Hat jemand eine Idee wie man das machen kann. Ich habe jetzt Stunden gesucht und keine Lösung gefunden ☹  
Für Hinweise und Ideen schon jetzt herzlichen Dank!  
Grüße Michael

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [22. Juli 2025 um 18:17 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/2 "2025-07-22T18:17:34Z")

</div>

Das muss sich im SCSS (CSS) verstecken. Habe selbst noch nie nachgesehen. Gehe aber davon aus, dass es dafür eine extra Datei gibt, indem alle entsprechenden Styles drin sind.

---

<div class="post-metadata">

**Author:** ![traktorenersatzteile](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@traktorenersatzteile](https://forum.shopware.com/u/traktorenersatzteile)\
**Post date:** [22. Juli 2025 um 20:52 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/3 "2025-07-22T20:52:47Z")

</div>

Hi Max\_Shop,  
habe ich auch gedacht aber bisher nichts gefunden ☹

---

<div class="post-metadata">

**Author:** ![traktorenersatzteile](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@traktorenersatzteile](https://forum.shopware.com/u/traktorenersatzteile)\
**Post date:** [18. August 2025 um 07:08 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/4 "2025-08-18T07:08:27Z")

</div>

Keiner hier, der das Problem kennt?

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [18. August 2025 um 07:18 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/5 "2025-08-18T07:18:30Z")

</div>

Die meisten lassen den Rahmen genau wegen Barrierefreiheit mit Absicht drin.

In der Navigation z.B. wird das durch ‘.nav-link:focus-visible’ und CSS ‘box-shadow’ gesteuert. Ist also kein Rahmen eher Schatten 🙂 Wird bei anderen Elementen wohl ähnlich sein.

---

<div class="post-metadata">

**Author:** ![traktorenersatzteile](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@traktorenersatzteile](https://forum.shopware.com/u/traktorenersatzteile)\
**Post date:** [18. August 2025 um 07:26 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/6 "2025-08-18T07:26:07Z")

</div>

Herzlichen Dank R4M,

das werde ich ausprobieren.

---

<div class="post-metadata">

**Author:** ![traktorenersatzteile](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@traktorenersatzteile](https://forum.shopware.com/u/traktorenersatzteile)\
**Post date:** [27. August 2025 um 11:04 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/7 "2025-08-27T11:04:59Z")

</div>

Vielen Dank R4M, das war es.

---

<div class="post-metadata">

**Author:** ![getmoreparts](https://avatars.discourse-cdn.com/v4/letter/g/c77e96/32.png) [@getmoreparts](https://forum.shopware.com/u/getmoreparts)\
**Post date:** [3. September 2025 um 13:01 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/8 "2025-09-03T13:01:39Z")

</div>

Ich hätte das auch gerne weg. Bei Maus-Hover ist so ein Rahmen ja für Barrierefreiheit kein Muss, oder irre ich mich da? Habe (glaube ich 😃 ) auch schon rausgefunden dass das nicht direkt über css gelöst wird sondern über das bootstrap javascript der focus() bei dropdown gesetzt wird. Eine Lösung wäre wohl ein .js plugin dass dem entgegenwirkt (oder im vendor das ändern, aber da lass ich besser die Finger von)  
Freue mich wenn ich mich irre und man mir das besser erklären kann =)

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [3. September 2025 um 13:33 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/9 "2025-09-03T13:33:03Z")

</div>

> [@getmoreparts](#):
>
> Eine Lösung wäre wohl ein .js plugin

Hm, was ist einfacher? CSS anpassen oder ein extra Plugin schreiben? 🙂

---

<div class="post-metadata">

**Author:** ![traktorenersatzteile](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@traktorenersatzteile](https://forum.shopware.com/u/traktorenersatzteile)\
**Post date:** [5. September 2025 um 09:16 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/10 "2025-09-05T09:16:17Z")

</div>

Also bei mir hat CSS wie o.g. gereicht.

---

<div class="post-metadata">

**Author:** ![Thorsten76](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@Thorsten76](https://forum.shopware.com/u/Thorsten76)\
**Post date:** [10. September 2025 um 13:45 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/11 "2025-09-10T13:45:03Z")

</div>

Aber mit der css Anweisung, verschwindet der Rahmen auch bei der Bedienung mit der Tastatur, wozu es der Rahmen aber gedacht ist und für die Barrierefreiheit auch notwendig ist.

Warum wird hier per js der focus-visible gesetzt, der nur dafür gedacht ist, per Tastatur ausgelöst zu werden?

---

<div class="post-metadata">

**Author:** ![getmoreparts](https://avatars.discourse-cdn.com/v4/letter/g/c77e96/32.png) [@getmoreparts](https://forum.shopware.com/u/getmoreparts)\
**Post date:** [19. September 2025 um 09:07 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/12 "2025-09-19T09:07:41Z")

</div>

Genau, wer den Rahmen mit CSS entfernt verliert die Barrierefreiheit. Sehe daher nur mit javascript eine Lösung.

---

<div class="post-metadata">

**Author:** ![aggrosoft](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/aggrosoft/32/23875_2.png) [@aggrosoft](https://forum.shopware.com/u/aggrosoft)\
**Post date:** [19. September 2025 um 13:10 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/13 "2025-09-19T13:10:21Z")

</div>

Ja das ist eine Sache die man mit einem kleinen javascript erledigen kann:

```javascript
function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

```

```css
body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

```

Mehr infos dazu hier:

> **[Removing that ugly :focus ring (and keeping it too)](https://david-gilbertson.medium.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2)**
>
> You know how it goes, you’ve got a carefully crafted design that is just the way you like it (uh huh uh huh).

---

<div class="post-metadata">

**Author:** ![traktorenersatzteile](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@traktorenersatzteile](https://forum.shopware.com/u/traktorenersatzteile)\
**Post date:** [23. September 2025 um 11:07 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/14 "2025-09-23T11:07:20Z")

</div>

> [@aggrosoft](#):
>
> ```auto
> body:not(.user-is-tabbing) button:focus,
> body:not(.user-is-tabbing) input:focus,
> body:not(.user-is-tabbing) select:focus,
> body:not(.user-is-tabbing) textarea:focus {
> outline: none;
> }
> 
> ```

Das funktioniert so leider gar nicht! Schon deshalb, weil der Rahmen durch box-shadow erzeugt wird und nicht durch outline.

---

<div class="post-metadata">

**Author:** ![aggrosoft](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/aggrosoft/32/23875_2.png) [@aggrosoft](https://forum.shopware.com/u/aggrosoft)\
**Post date:** [23. September 2025 um 12:13 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/15 "2025-09-23T12:13:36Z")

</div>

Dann pass das css doch entsprechend an, es ging hier eher darum wie man das technisch umsetzt

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [23. Oktober 2025 um 12:14 UTC](https://forum.shopware.com/t/hauptnavigation-rahmen-focus-bei-mouse-hover-und-click/107651/16 "2025-10-23T12:14:10Z")

</div>

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.