Zmiania tekstu przez CSS

pytanie zadane 14 lipca 2017 w HTML i CSS przez Hiskiel Pasjonat (22,830 p.)
zmienione kategorie 14 lipca 2017 przez Hiskiel

Cześć! Postanowiłem się pobawić css'em (w miarę swoich możliwości), żeby utrwalić wiedzę, ale mam kolejne pytanie... Otóż mam taki kod HTML :

<!DOCTYPE HTML>
<html lang="pl-PL">
	<head>
		<meta charset="utf-8" >
		<link rel="stylesheet" href="styles.css" type="text/css" />
	</head>
	<body>
		<div id="buttondiv">
			<button id="button">button</button>
		</div>
	</body>
</html>

I taki kod CSS:

body 
{
	background-color: gray;
}
*
{
	margin: 0;
	border: 0;
	padding:0;
	box-sizing: border-box;
}
#buttondiv
{
	width:100px;
	height:100px;
	left: 100px;
}
#button
{
	background-color: #682496;
	margin-left: 500px;
	margin-top: 200px;
	width: 100px;
	height: 100px;
	border-radius: 50px 50px 50px 50px;
	border: 5px solid #7935a7;
	transition: all 0.5s ease-in-out;
}
#button:hover
{
	transform: scale(1.2) rotate(360deg);
	border: 10px solid #7935a7;
}

I chodzi oto, że chciałbym z poziomu #button:hover zmienić tekst w <button id="button">button</button> ... Czy da się tak zrobić? A jeśli się nie da, to podacie jakiś zamiennik lub odpowienik? Prosiłbym o pomoc...

komentarz 14 lipca 2017 przez Fenix Nałogowiec (26,750 p.)

Kategorie zmien (aktualnie ustawiles na c/c++)

komentarz 14 lipca 2017 przez Hiskiel Pasjonat (22,830 p.)

O! Tak... sorry! Musiałem źle kliknąć. Przepraszam, już zmieniam!

2 odpowiedzi

odpowiedź 14 lipca 2017 przez imklau Nałogowiec (42,090 p.)

Podstawy podstaw JS ;)
document.querySelector('#id-elementu') + innerHTML lub innerText Ci sie przyda ;)
aa no i addEventListener do ustalania eventu, ktory chcesz nasluchiwac. Wiec polecam poznac te rzeczy ;)

komentarz 14 lipca 2017 przez Hiskiel Pasjonat (22,830 p.)

Thx, jak na razie uczę się na programistę frontendowego więc JS również wchodzi w grę, ale mam pytanie... Czy kod JS można zawrzeć między klamrami Css'a?

komentarz 14 lipca 2017 przez Fenix Nałogowiec (26,750 p.)

W js owszem, ale kolega prosil o rozwiazanie za pomoca css.

komentarz 14 lipca 2017 przez Hiskiel Pasjonat (22,830 p.)

Jednakże to będzie lepsze rozwiązanie :) Thx :D

komentarz 14 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

document.querySelector('#id-elementu') + innerHTML lub innerText Ci sie przyda ;)

Zamiast innerText lepiej korzystać z textContent: https://kellegous.com/j/2013/02/27/innertext-vs-textcontent

Nie chodzi tu tylko o sam fakt, że innerText nie należy do standardu ale i o zachowanie się obu rozwiązań. Polecam zobaczyć jak to wygląda na przykładach opisanych w powyższym artykule.

odpowiedź 14 lipca 2017 przez Fenix Nałogowiec (26,750 p.)

Aby uzyskac to za pomoca css musisz uzyc pseudo elementu ::after, oraz wlasciwosci content.

Tutaj masz przyklad ::after .

Pokaż 7 poprzednich komentarzy

komentarz 14 lipca 2017 przez Hiskiel Pasjonat (22,830 p.)

Okay... Thx!!! Zobacze później co będzie!

komentarz 14 lipca 2017 przez Fenix Nałogowiec (26,750 p.)

@Noemi, zalezy jak patrzysz. Patrzac na zadane pytanie oraz nazwe tematu jest jedynym prawidlowym. Ale tak tylko sie czepiam :P

@Swipeyro jesli chcesz zrobic to za pomoca js przeczytaj: addEventListener

komentarz 14 lipca 2017 przez Hiskiel Pasjonat (22,830 p.)

Thx wszystkim za pomoc! Przydatne napewno okaże się to z JS'em oraz z czcionką... Js'a będę się uczyc później a teraz idzie HTML i CSS... Thx wszystkim za pomoc! Wszystko co chciałem wiedzieć już wiem!

komentarz 14 lipca 2017 przez Hiskiel Pasjonat (22,830 p.)

Przepraszam, że znowu was "nawiedzam" ale mam kolejny problem... Otóż to z tym contentem i fontem działa... Tekst się zmienia... Jednakże... Sa pewne problemy z animacją... Nie odgrywa się ona... A na niej mi w głównej mierze zależy... Chciałbym, żeby i tekst się zmieniał i animacja się odgrywała... Jest jakiś sposób? Z góry dziękuję za odpowiedź...