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?