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

Jak zmienić jakiś element po najechaniu myszką na inny?

VPS Starter Arubacloud
0 głosów
2,739 wizyt
pytanie zadane 23 października 2015 w HTML i CSS przez DavidMCPolska Bywalec (2,770 p.)
Czy w ogóle da się zrobić tak, żeby po najechaniu jakiegoś elementu zmieniał się inny? Jeśli tak to jak to mogę zrobić?
A = Element na który trzeba najechać
B = Element który ma zostać zmieniony po najechaniu na A

HTML:
- A jest niżej elementu B
- A i B nie są bezpośrednio w tym samym elemencie
- A i B są oznaczone klasami (jeśli będzie trzeba to zmienie na id)

Strona internetowa: http://DavidMCPolska.tk/123123 - po najechaniu na któreś z kółek ma się zmienić ekran laptopa.

Z góry dziękuje ;)

2 odpowiedzi

0 głosów
odpowiedź 23 października 2015 przez Ivan Maniak (60,650 p.)
wybrane 25 października 2015 przez DavidMCPolska
 
Najlepsza

Najlepiej chyba coś takiego będzie w Js napisać. Tutaj masz przykład jak coś takiego stworzyć [JQuery]:


//html
<!-- monitor -->
<div id="menu-window"></div>

[...]
<!-- buttons -->
<div class="menu-button" monitor="animacje-3d">...</div>
<div class="menu-button" monitor="grafika-3d">...</div>
<div class="menu-button" monitor="programowanie">...</div>


//js
$('.menu-button').hover(function(){
	
	//Pobierz atrybut monitor z przycisku
	var monitor = $(this).attr('monitor');

	//usun aktualna klase
	$('#menu-window').removeClass();

	//dodaj nowa klase
	$('#menu-window').addClass(monitor);

});

 

komentarz 23 października 2015 przez DavidMCPolska Bywalec (2,770 p.)

Sory, ale długo nie było odpowiedzi i musiałem poszperać w internecie i złożyłem takie coś:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".menu-button-hover").hover(function()
    {
      $('.menu-window').addClass('display');
      }, function(){
        $('.menu-window').removeClass('display');
    });
    });
    </script>

A twojego kodu trochę nierozumiem, bo po co usuwać aktualną klasę i dawać id monitorowi jak można dodać klasę z opacity, ale dzięki, że coś napisałeś może się jeszcze przyda :)

0 głosów
odpowiedź 23 października 2015 przez iwan9449 Pasjonat (20,810 p.)
a:hover .monitor {

...

}

Taka konstrukcja powinna zadziałać
komentarz 23 października 2015 przez DavidMCPolska Bywalec (2,770 p.)
Niestety nie działa, w podglądzie Chrome Developer Tools nawet nic się nie zmienia jak zajdzie hover :(
komentarz 23 października 2015 przez DavidMCPolska Bywalec (2,770 p.)
A w JavaScript by się dało?

Podobne pytania

0 głosów
1 odpowiedź 327 wizyt
pytanie zadane 22 lipca 2018 w HTML i CSS przez mibi Nowicjusz (220 p.)
0 głosów
1 odpowiedź 1,368 wizyt
pytanie zadane 24 stycznia 2018 w HTML i CSS przez Nocomentor Początkujący (250 p.)
0 głosów
3 odpowiedzi 3,223 wizyt
pytanie zadane 31 października 2015 w HTML i CSS przez Filip31411 Dyskutant (8,820 p.)

92,453 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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!

...