links aanpassen met CSS

DavePeters
(@davepeters)

4 jaren geleden

Hoi Ik heb het volgende probleem. In mijn website heb ik een verschillende opmaak nodig voor de links. De ene keer wil ik het zo en de andere keer weer ander, bv een andere kleuren van de links per widget. Nu heb ik de globale tag a die ik kan aanpassen. Ik heb een plugin geinstalleerd enzo kan ik per widget een CSS of/en ID koppelen. Via Custom CSS probeer ik nu de stijl van de links per widget aan te maken. Maar ik kom er niet echt uit. Zie onderstaande code: (Widget1-Nieuws is de klasse gekoppeld aan de widget)

.Widget1-Nieuws {
background-color: #98CC99 !important;
padding-left: 20px;
border-radius: 25px !important;
/* comment out a {color: #0000ff;}
a:link {color: 5459FF;}
a:visited {color: #FFFFFF;}
a:hover {color: #FFFFFF;}
a:active {color: #FFFFFF;}
*/
}

.Widget1-Nieuws ul li a {
a {color: #0000ff !important;}
a:link {color: 5459FF;}
a:visited {color: #FFFFFF;}
a:hover {color: #FFFFFF;}
a:active {color: #FFFFFF !important;}
}

Kan iemand eens goed naar de code kijken en mij helpen deze juist op te gaan stellen?

Bij voorbaat dank!

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)

Ruurd de Wind
(@geoclaps)

4 jaren geleden
Bedoel je dit? Je hebt namelijk een aantal syntax fouten in je css waardoor links niet goed worden gestyled.
```
.Widget1-Nieuws a {
    color: #5459FF;
}
```
```
.Widget1-Nieuws a:active,
.Widget1-Nieuws a:focus,
.Widget1-Nieuws a:hover {
    color: #fff;
}
```
Thread starter DavePeters
(@davepeters)

4 jaren geleden

Het gaat al wat beter als ik de volgende CSS gebruik:

.Widget1-Nieuws ul li a {
color: #FFFFFF !important;,
:hover {color: #000000 !important;}
}

Nu wordt de linktekst mooi wit maar het tweede :hover gedeelte wilt niet echt werken.
Met de , eruit werkt niet en dubbel als zo ook niet:

.Widget1-Nieuws ul li a {
color: #FFFFFF !important;
}

.Widget1-Nieuws ul li a: {
hover {color: #000000 !important;}
}
Ruurd de Wind
(@geoclaps)

4 jaren geleden
Omdat het niet is toegestaan. Zie hieronder de juiste opmaak zoals ook eerder aangegeven.
```
.Widget1-Nieuws ul li a {
     color: #FFFFFF !important;
}

.Widget1-Nieuws ul li a:hover {
    color: #000000 !important;
}
```
Thread starter DavePeters
(@davepeters)

4 jaren geleden
Het werkt nu wat beter met:
```
.widget1ID { 
  background-color: #3183BB !important;
  padding-left: 20px;
  border-radius: 25px !important;
}

.widget1ID ul li a {
  color: #FFFFFF !important;
}

.widget1ID li a:hover {
    color: #000000 !important;
}

.widget1ID li a:active {
    color: #000000 !important;
}

.widget1ID li a:focus {
    color: #000000 !important;
}

/*
.Widget1ID ul li a:active,
.Widget1ID ul li a:focus,
.widget1ID ul li a:hover {
  color: #000000 !important;
}
*/
```
Nu wordt de link gewoon wit en als ik er over heen hover wordt deze netjes zwart. Precies hoe we het in de CSS zeggen. Alleen a:active en a:focus lijken niks te doen. Een aangeklikte link wordt weer wit terwijl deze zwart moet blijven.

Waar ligt dit aan?

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)

Het onderwerp ‘links aanpassen met CSS’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven