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

Po najechaniu kursorem na hiperłącze ma nastąpić zmiana tła w obszarze obrazka + napisu

VPS Starter Arubacloud
0 głosów
1,458 wizyt
pytanie zadane 4 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

Witam.

Aktualnie w divie content mam umieszczony po lewej - obrazek i tuż obok niego po prawej - przycisk z napisem. Poniżej jest to samo, tylko inne obrazki i inne napisy na przyciskach. Odległość pomiędzy obrazkami, a przyciskami wynosi ok 10px.

<div class="content">
			
	<a href="muzyka.php"><div class="button" style="position: absolute; left: 69px; top: 19px">Muzyka</div></a>
		<img src="obrazki/muzyka.png" width="42px" height="31px" style="border: 1px solid #000000; position: absolute; left: 11px; top: 16px" />
					
	<a href="film.php"><div class="button" style="position: absolute; left: 69px; top: 70px">Film</div></a>
		<img src="obrazki/film.png" width="42px" height="31px" style="border: 1px solid #000000; position: absolute; left: 11px; top: 67px" />
					
	<a href="sport.php"><div class="button" style="position: absolute; left: 69px; top: 121px">Sport</div></a>
		<img src="obrazki/sport.png" width="42px" height="31px" style="border: 1px solid #000000; position: absolute; left: 11px; top: 118px" />
					
</div>
.content
{
	width: 1000px;
	height: 322px;
	background-color: #A9A9A9;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
}

.button
{
	color: white;
	background-color: #006633;
	font-size: 12px;
	width: 90px;
	line-height: 27px;
	text-align: center;
}

.button:hover
{
	color: black;
	background-color: #BCE27F;
	cursor: pointer;
}

 

Chciałbym zrobić tak, aby zamiast przycisku był sam napis i po najechaniu kursorem na hiperłącze ma nastąpić zmiana tła w obszarze obrazka + napisu.

Chodzi mi o taki efekt jaki występuje na:

https://www.youtube.com

Po lewej na środku jest mały obrazek i napis - Muzyka. Poniżej mały obrazek i napis - Sport. Itd itd...

Co muszę zmienić w kodzie, aby po najechaniu kursorem na dane hiperłącze nastąpi zmiana tła w obszarze obrazka + napisu?

3 odpowiedzi

+1 głos
odpowiedź 4 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)
Obrazek, jak mniemam jest to ikona - powinna być w środku hiperłącza.

Dobrze byłoby gdybyś dał podgląd online.

(dobrą praktyką jest niemieszanie warstw, oddziel CSS od HTML)
komentarz 4 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)
Podejrzewam, że zdarzenie onmouseover nie będzie tu potrzebne. Prawdopodobnie wystarczy HTML + CSS do zmiany tego tła.

Za chwilę mogę pokazać jak to aktualnie wygląda...
+1 głos
odpowiedź 4 stycznia 2017 przez pablop76 VIP (123,060 p.)
Witam. Zwykłe menu a obrazki wstawione jako :before potem :hover ze zmiana tła i koloru czcionki i to wszystko.
komentarz 4 stycznia 2017 przez pablop76 VIP (123,060 p.)
edycja 5 stycznia 2017 przez pablop76
<div class="menu">muzyka</div>
.menu {
  width: 70px;
  height: 24px;
  background-color: white;
  color: grey;
  border: 1px solid red;
  line-height: 24px;
  padding-left: 30px;
}

.menu:before {
    content: url(http://mojhovek.com.pl/music.png);
    position: absolute;
    top: 10px;
    left: 10px;
}

.menu:hover {
  background: #FBBC05;
  color: white;
  cursor:pointer;
}

 

 

komentarz 4 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)

Chodzi o coś takiego:

https://jsfiddle.net/Krzysiek_35/z8nk9k49/

Dzięki za pomoc, pablop76.wink

Z tymże muszę jeszcze ten bajer przetestować z obrazkiem.

0 głosów
odpowiedź 4 stycznia 2017 przez timrh Mądrala (6,030 p.)

Użyj zdarzenia onmouseover.

<body>
 <div onmouseover="ZmienTloINapis()"></div> //zostanie wywolana funkcja ZmienTloINapis po najechaniu na diva
 <img src="zdj.png" id="zdj"/>
 <div id="tekst">start tekst</div>
</body>
<script>

 function ZmienTloINapis()
 {
  //odwołaj się poprzez id do danych elementów i zmień ich zawartość np poprzez
  document.getElementById('zdj').src="inneZdj.png";
  document.getElementById('tekst').innerHTML="nowy tekst";
 }

</script>

 

1
komentarz 4 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)
Mieszasz warstwy.

No i kolega chce tylko zmienić tło, nie napis - do tego sam CSS starczy.

Podobne pytania

0 głosów
2 odpowiedzi 187 wizyt
0 głosów
3 odpowiedzi 2,780 wizyt
0 głosów
1 odpowiedź 685 wizyt
pytanie zadane 11 stycznia 2017 w HTML i CSS przez mordimer Mądrala (5,720 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...