Hover Tags

Verso · January 25, 2015 at 9:49 AM

Ich habe die Badges für Tags geändert in Gelb, irgendwie werden sie nur zum Teil in Gelb angezeigt. Dann wenn ich drüber gehe ist der Hover komplett weiß.Gibt es noch eine Position in css die ich ausgelassen habe ?

Fendo · January 25, 2015 at 10:22 AM

Quote from Verso

irgendwie werden sie nur zum Teil in Gelb angezeigt

Das sollte mit .tag::before ansprechbar sein.

Verso · January 25, 2015 at 12:08 PM

Nein , leider keine Wirkung. Mit dem Aussehen könnte ich ja noch leben, aber der Hover ist nicht so toll da man nichts mehr lesen kann.

Fendo · January 25, 2015 at 12:10 PM

Was hast du denn als Deklaration getestet?

Verso · January 25, 2015 at 12:27 PM

CSS

.tag before {
background-color:#FFEB3B;
}

bestimmt falsch deklariert oder? hatte ich am Ende der css angegeben.

Bibini · January 25, 2015 at 12:29 PM

Quote from Track-Base

Das sollte mit .tag::before ansprechbar sein.

Quote from Verso

.tag before {

vergleiche mal ..fällt dir was auf?

Fendo · January 25, 2015 at 12:30 PM

Zum Einen das, was Bibi schon angesprochen hat und zum Anderen musst du border-color anstelle von background-color nutzen.

Verso · January 25, 2015 at 12:36 PM

ups,

CSS

.tag::before {
border-color:#FFEB3B;
}

hat jetzt schon etwas bewirkt, aber der Hover wenn ich darüber gehe ist immer noch weiss

norse · January 25, 2015 at 1:39 PM

.tag:hover:before?

Gruß norse

Verso · January 25, 2015 at 2:01 PM

Leider auch nicht

hier mal der aktuelle css code den ich drin habe.

CSS

.tag before {
background-color:#FFEB3B;
}




.tag::before {
border-color:#FFEB3B;
}




.tag hover::before  {
background-color:#FFEB3B;
}

Display More

Fendo · January 25, 2015 at 2:04 PM

CSS

.tag:hover {
background-color: red;
}

Wie man das before noch einbindet, habe ich noch nicht rausgefunden.

Verso · January 25, 2015 at 2:32 PM

Das hat geklappt

zumindestens der Background ist jetzt schon einmal so wie ich ihn haben möchte.

CSS

.tag:hover {
background-color: #FFEB3B;
}

Nick Strohm · January 25, 2015 at 6:54 PM

Hier aus dem generierten Blue Temptation Stil (Einfach nach deinem Belieben anpassen):

CSS

.tag {
  border-radius: 0 4px 4px 0;
  font-weight: normal;
  height: 13px;
  margin-left: 6px;
  padding-bottom: 2px;
  padding-left: 10px;
}
.tag::before {
  border-color: transparent #666666 transparent transparent;
  border-style: inset solid inset inset;
  border-width: 8px 8px 8px 0;
  clip: rect(auto auto auto 2px);
  content: "";
  height: 0;
  left: -8px;
  position: absolute;
  top: 0;
  width: 0;
  border-color: orange;
}
.tag::after {
  background: #ffffff;
  border-radius: 2px;
  content: "";
  height: 4px;
  left: -2px;
  position: absolute;
  top: 6px;
  width: 4px;
  box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.2);
}
.tag:hover {
  background-color: #336699;
  color: #ffffff;
}
.tag:hover::before {
  border-right-color: #336699;
}

Display More

Fendo · January 25, 2015 at 7:04 PM

Quote from Verso

hat jetzt schon etwas bewirkt, aber der Hover wenn ich darüber gehe ist immer noch weiss

CSS

.tag:hover::before {
  border-right-color: #FFEB3B;
}

Der Teil reicht.

Verso · January 25, 2015 at 7:35 PM

Vielen Dank euch beiden, jetzt ist alles gut
Da ich mich mit dem css nicht so auskenne habe ich gar nicht erst beim Standard geschaut.

Participate now!