• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Stylizowanie hiperłącza

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
45 wizyt
pytanie zadane 24 listopada w HTML i CSS przez zbiku25 Obywatel (1,270 p.)

Poszukuję sposobu na to aby po niejechaniu na link  "Utwórz nowe konto" nie wyświetlało się podkreślenie. Utworzyłem dla tego hiperłącza osobny span (button2), ale nawet przy zastosowaniu dla tego spana a:hover i text-decoration:none, podkreślenie po najechaniu nadal się wyświetla...

Ma ktoś może jakiś pomysł aby podkreślenie pod napisem się nie wyświetlało?

HTML

<div class="fifty">

	<div class="register">
		<form >
						
			<input type="email" name="email" placeholder="Adres email" class="text"><br><br>
			<input type="password" name="password" placeholder="Hasło" class="text"><br><br>
			<input type="submit" value="Zaloguj się" class="button1"><br><br>
						
		</form>
						
		<a href="#"><span class="span">Nie pamiętasz hasła?</span></a><br><br>
		<hr><br>

		<a href="#"><span class="button2">Utwórz nowe konto</span></a>
					
	</div> 
	
</div>

CSS

.fifty
{
	width:50%;
	text-align:center;
}

.fifty a
{
	text-decoration:none;
}

.fifty a:hover
{
	text-decoration:underline;
	text-decoration-color: #CC0099	;
}

.fifty a:visited
{
	color: #CC0099	;
}

.register
{
	background-color:white;
	margin-left:auto;
	margin-right: auto;
	width:450px;
	text-align: center;
	padding:35px;
	border-radius:10px;

}

.text
{
	width:360px;
	height:40px;
	border: 1px #ccc solid;
	border-radius:5px;
	font-size:1rem;
	
}

.button1
{
	width:360px;
	height:40px;
	background-color:#CC0099;
	border:none;
	color:white;
	font-weight:700;
	font-size:1.3rem;
	border-radius:5px;
}


.button2
{
	width:210px;
	height:40px;
	background-color:#4169E1;
	border:none;
	color:white;
	font-weight:700;
	font-size:1.2rem;
	border-radius:5px;
	padding:10px;
}

.button2 a:hover
{
	text-decoration:none;
}

.span
{
	color:#CC0099;
}

1 odpowiedź

+1 głos
odpowiedź 24 listopada przez Comandeer Guru (580,340 p.)
wybrane 24 listopada przez zbiku25
 
Najlepsza

Bo .button2 jest wewnątrz linku, nie na zewnątrz, więc selektor .button2 a nic nie łapie.

Po prostu przypisz klasę do linku i zrób .klasa:hover (chociaż pewnie będziesz musiał zrobić .fifty .klasa:hover, bo wyżej masz już selektor dla .fifty a i zapewne nadpisze z powodu specyficzności).

komentarz 24 listopada przez zbiku25 Obywatel (1,270 p.)

@Comandeer, Wszystko zadziałało! dziękuję!

komentarz 24 listopada przez VBService Ekspert (204,430 p.)

W ramach ciekawostki możesz użyć :has

a:has(.button2):hover
{
    text-decoration:none;
}

 

komentarz 25 listopada przez zbiku25 Obywatel (1,270 p.)
Dziękuję VBService - jak zawsze dodasz coś interesującego :)

Podobne pytania

0 głosów
1 odpowiedź 63 wizyt
pytanie zadane 25 października 2021 w HTML i CSS przez olek1405 Nowicjusz (180 p.)
0 głosów
3 odpowiedzi 136 wizyt
pytanie zadane 25 kwietnia 2020 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)
0 głosów
1 odpowiedź 145 wizyt
pytanie zadane 24 lipca 2016 w HTML i CSS przez kkiermasz Użytkownik (680 p.)

89,760 zapytań

138,364 odpowiedzi

309,424 komentarzy

59,673 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 908p. - Argeento
  2. 877p. - nidomika
  3. 851p. - Michal Drewniak
  4. 848p. - Mikbac
  5. 846p. - rucin93
  6. 838p. - Łukasz Eckert
  7. 835p. - ssynowiec
  8. 822p. - TheLukaszNs
  9. 794p. - JMazurkiewicz
  10. 787p. - Hubert Chęciński
  11. 786p. - adrian17
  12. 775p. - Jarosław Roszyk
  13. 760p. - Mawrok
  14. 756p. - overcq
  15. 752p. - Vinox
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...