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

pytanie zadane 4 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,550 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

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,550 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...

odpowiedź 4 stycznia 2017 przez pablop76 VIP (123,580 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,580 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,550 p.)

Chodzi o coś takiego:

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

Dzięki za pomoc, pablop76.

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

odpowiedź 4 stycznia 2017 przez timrh Mądrala (6,010 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.