auf Youtube Abmelden farblich ?

milupo

AngelOfDarkness Also erstens geht es um Youtube und nicht um Ebay, wie auch schon dem Thread-Titel zu entnehmen ist. Dann habe ich mehrfach geschrieben, dass es bei mir nur mit der Hover-Regel nicht klappt, die normale Regel und die für das Symbol davor funktionieren. Schließlich habe ich wie Andreas die Regel für den TE ermittelt. Aber wenn du mir das nicht glaubst, glaubst du hoffentlich einem Bildschirmfoto:

Nochmal: Das Problem ist nur, dass die Hover-Regel nicht funktioniert. Ich kann mit dem Cursor auf dem Eintrag Abmelden herumfuhrwerken wie ich will, die Schriftfarbe ändert sich nicht.

AngelOfDarkness

milupo

man könnte denken du hast schlecht geschlafen und verstehst keinen Spaß mehr. Der Ironie wegen habe ich doch ebay geschrieben.. Also wirklich

milupo

Ich konnte da keine Ironie erkennen und finde sie auch etwas deplatziert.

AngelOfDarkness

// mehr Zinkersymilies wolte ich nicht setzt, einer musste reichen

2002Andreas

Zitat von milupo

dass die Hover-Regel nicht funktioniert.

Nur mal zwecks Test:

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1):hover {
  background: blue !important;
}

Dann wird der Hintergrund blau.

Bei dem Text Abmelden muss man exakt auf den Text mit der Maus gehen.

Dato

Danke von meiner Seite aus.

2002Andreas

Zitat von Dato

Danke von meiner Seite aus.

Wenn du zufrieden bist damit, gern geschehen

milupo

Zitat von 2002Andreas

Dann wird der Hintergrund blau.

Danke Andreas. Das funktioniert, bezieht sich aber auf die ganze Zeile. Mit der normalen Regel kann ich den Hintergrund auf den Eintrag beschränken. Rote Schrift, blauer Hintergrund. Für Hover habe ich die Farben vertauscht, blaue Schrift, roter Hintergrund. Nichts zu machen, weder Schriftfarbe noch Hintergrundfarbe werden bei Hover verändert, wohl gemerkt mit dem vollen Selektorpfad. Der von dir aus Beitrag #25 ist verkürzt, deshalb färbt er die ganze Zeile ein. Was stört Hover am letzten Glied im Selektorpfad, an > yt-formatted-string:nth-child(2)?

2002Andreas

Ich habe jetzt alles ausprobiert:

Mit den Entwickler-Werkzeugen

Mit der userContent.css

Mit Stylus

Mit allen funktioniert das mit dem Hover auf Abmelden hier

milupo

Ich kriege die Krise. Im Moment funktioniert nicht einmal mehr der verkürzte Pfad für die ganze Zeile bei Hover. Gar nichts mit Hover.

milupo

So jetzt klappt es. Aber es ist etwas eigenartig. Ich brauchte den verkürzten Hover-Pfad von Andreas, der muss aber vor dem vollständigen Hover-Pfad stehen. Ohne den verkürzten Hover-Pfad geht es gar nicht, wenn der verkürzte Hover-Pfad hinter dem vollständigen Hover-Pfad steht, wird lediglich die ganze Zeile eingefärbt. So sieht es also bei mir jetzt aus:

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {
fill: red !important;
}

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > yt-formatted-string:nth-child(2) {
font-size: 20px !important;
color: red !important;
background: green !important;
}

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1):hover {
  background: blue !important;
}

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > yt-formatted-string:nth-child(2):hover {
background: blue !important;
color: yellow !important;
}

Alles anzeigen

milupo

Diese Kurzschreibweise funktioniert auch:

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {
fill: red !important;
}

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > yt-formatted-string:nth-child(2) {
font-size: 20px !important;
color: red !important;
background: green !important;
}

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1):hover, yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > yt-formatted-string:nth-child(2):hover {
background: blue !important;
color: yellow !important;
}

Alles anzeigen

Dato

Hallo,

ich habe mir einen border-left beim hover Effekt hinzugefügt und das ergebnis ist, das es beim rüberfahren Zappelt

ich hätte gerne ohne das Zappeln und bei den nromalen das selbe nur nicht in rot sondern in Grau den border-left.

wäre das möglich ?

hier mein Code dafür

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {
    fill:#a4000f !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > yt-formatted-string:nth-child(2) {
  font-weight:700 !important;
  color:#a4000f !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1):hover {
    background:rgb(164, 0, 15, 0.1) !important;
     border-left: 4px solid #a4000f !important; }

Alles anzeigen

2002Andreas

Teste bitte mal:

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {
    fill: #a4000f !important;
    padding-right: 5px !important;
    transform: scale(1.3, 1.3) !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > yt-formatted-string:nth-child(2) {
    font-weight: 700 !important;
    color: #a4000f !important;
    margin-left: -4px !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1):hover {
     background: rgb(164, 0, 15, 0.1) !important;
     border-left: 4px solid #a4000f !important; 
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) {
    border-left: 4px solid transparent !important;
    }

Alles anzeigen

Dato

Danke,

jetzt passt wie soll.

2002Andreas

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

Dato

Zitat von 2002Andreas

Teste bitte mal:

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {
    fill: #a4000f !important;
    padding-right: 5px !important;
    transform: scale(1.3, 1.3) !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > yt-formatted-string:nth-child(2) {
    font-weight: 700 !important;
    color: #a4000f !important;
    margin-left: -4px !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1):hover {
     background: rgb(164, 0, 15, 0.1) !important;
     border-left: 4px solid #a4000f !important; 
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) {
    border-left: 4px solid transparent !important;
    }

Alles anzeigen

Hallo,

leider funktioniert das nicht mehr in Firefox Version 87.0

kann man das irgendwie wieder hinbiegen ?

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {
    fill: #a4000f !important;
    padding-right: 5px !important;
    transform: scale(1.3, 1.3) !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) > yt-formatted-string:nth-child(2) {
    font-weight: 700 !important;
    color: #a4000f !important;
    margin-left: -4px !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1):hover {
     background: rgb(164, 0, 15, 0.1) !important;
     border-left: 5px solid #a4000f !important; 
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > paper-item:nth-child(1) {
    border-left: 5px solid transparent !important;
    }

Alles anzeigen

2002Andreas

Zitat von Dato

kann man das irgendwie wieder hinbiegen ?

Teste bitte mal:

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > tp-yt-paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {

    fill: #a4000f !important;
    padding-right: 5px !important;
    transform: scale(1.3, 1.3) !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > tp-yt-paper-item:nth-child(1) > yt-formatted-string:nth-child(2) {
    font-weight: 700 !important;
    color: #a4000f !important;
    margin-left: -4px !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > 
a:nth-child(1) > tp-yt-paper-item:nth-child(1):hover {
     background: rgb(164, 0, 15, 0.1) !important;
     border-left: 4px solid #a4000f !important; 
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > tp-yt-paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {
    border-left: 4px solid transparent !important;
    }

Alles anzeigen

Dato

Danke erstmal,

habe auf die schnelle mal geschaut.

Funktioniert bis auf ein kleines Zappeln wenn man mit der Maus drüber fährt.

Dann springt das Icon und der Text ein wenig nach rechts.

2002Andreas

Zitat von Dato

Dann springt das Icon

CSS

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > tp-yt-paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {

    fill: #a4000f !important;
    padding-right: 5px !important;
    transform: scale(1.3, 1.3) !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > tp-yt-paper-item:nth-child(1) > yt-formatted-string:nth-child(2) {
    font-weight: 700 !important;
    color: #a4000f !important;
    margin-left: -4px !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > 
a:nth-child(1) > tp-yt-paper-item:nth-child(1):hover {
    background: rgb(164, 0, 15, 0.1) !important;
    border-left: 4px solid #a4000f !important; 
    margin-left: -4px !important;
    }

yt-multi-page-menu-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-compact-link-renderer:nth-child(5) > a:nth-child(1) > tp-yt-paper-item:nth-child(1) > div:nth-child(1) > yt-icon:nth-child(2) > svg:nth-child(1) {
    border-left: 4px solid transparent !important;
    }

Alles anzeigen