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

question-closed Hover ma zachodzić na rodzicu elementu który jest najechany

VPS Starter Arubacloud
0 głosów
1,048 wizyt
pytanie zadane 4 sierpnia 2019 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)
zamknięte 4 sierpnia 2019 przez Grzegorz Mikina

Chcę żeby hover działał na całe body.
a nie na element który jest akurat najechany.
 

body>div.red{
    width:30px;
    height:30px;
    background-color: red;
    border:2px white solid;
    border-radius:50%;
    position:absolute;
    top:10%;
    left:10%;
    transition: 0.5s;
}
body>div.red:hover body{
background-color: yellow;
}

 

komentarz zamknięcia: Rozwiązanie to tylda  .. : hover ~ .jakaśklasa, działanie zachodzi na jakimś bracie.

1 odpowiedź

+1 głos
odpowiedź 4 sierpnia 2019 przez spamator12 Nałogowiec (28,230 p.)
edycja 5 sierpnia 2019 przez Arkadiusz Waluk
body:hover{
background-color: yellow;
}

 

ale wydaje mis ie, ze chodzi Ci o cos innego, nie zrobisz tego za pomoca css, wiec lykaj:

<script>

var kolko = document.getElementsByClassName('red')[0];
var cialo = document.getElementsByTagName('body')[0];
kolko.onmouseover = function(){
    cialo.style.background = "yellow";
};
kolko.onmouseout = function(){
    cialo.style.background = "";
};

</script>


pododawaj sobie transition i co tam chcesz.

1
komentarz 4 sierpnia 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)
Zrobię kolego, chodzi tutaj o brata więc dodaję tyldę po hover i działanie zachodzi na bracie. Pozdrawiam i dziękuję za pomysł.
komentarz 4 sierpnia 2019 przez spamator12 Nałogowiec (28,230 p.)
edycja 5 sierpnia 2019 przez Arkadiusz Waluk

masz, racje - mozna to zrobic w samym css (brat tez musi miec hover). Zostawmy dla potomnych odpowiedz:

<style>
body>div.red{
    width:100px;
    height:100px;
    background-color:red;
    border:2px white solid;
    border-radius:50%;
    position:absolute;
    top:10%;
    left:10%;
    transition:0.5s;
}
body:hover div.red:hover{
    background-color:yellow;
}
</style>
komentarz 4 sierpnia 2019 przez ScriptyChris Mędrzec (190,190 p.)

@spamator12, proszę umieszczać kod w odpowiednich bloczkach.

komentarz 4 sierpnia 2019 przez eternafali Nowicjusz (100 p.)
Nic nie rozumiem z tego pytania, przykłady @spamator12 dzialaja, natomiast użycie '~' z css nie przynosi efektów.
1
komentarz 4 sierpnia 2019 przez spamator12 Nałogowiec (28,230 p.)
bo zamiast '~' mozesz uzyc tez '>' -  w kazdym razie w css nic nie ruszy bez dodania odatkowych elementow. Jak chcesz to zrobic za pomoca body > div.red to zostaje JS.
komentarz 4 sierpnia 2019 przez spamator12 Nałogowiec (28,230 p.)

@JSHolic nie moge edytowac komentarzy - https://forum.pasja-informatyki.pl/443211/hover-ma-zachodzic-na-rodzicu-elementu-ktory-jest-najechany?show=443315#c443315

 

te bloczki sa jakies takie nei czytelne wiec bede podawal do czegos zewnetrznego.

komentarz 5 sierpnia 2019 przez ScriptyChris Mędrzec (190,190 p.)
Nie możesz edytować swoich komentarzy? Nie masz dostępnego przycisku edycji, czy on nie działa?

Co masz na myśli, że bloczki są nieczytelne?
komentarz 5 sierpnia 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

@spamator12, Jest różnica między ~ a > 
~ oznacza równy brat
> oznacza relacje rodzic dziecko

komentarz 5 sierpnia 2019 przez spamator12 Nałogowiec (28,230 p.)

kazdy znjadzie sobie definicje, mozesz zrobic nawet z +:

<html>
<head>
    <style>
        .red
        {width:100px;
        height:100px;
        background-color:red;
        border:2px white solid;
        border-radius:50%;
        position:absolute;
        top:5%;
        left:40%;
        transition:0.5s;
        z-index:1;}

        .owner
        {position:fixed;
        width:100%;
        height:100%;
        z-index:0;}

         .owner:hover + .red
        {background-color:yellow;}
    </style>
</head>
<body>

<div class="owner"></div>
<div class="red"></div>

</body></html>

 

co nie zmienia faktu, ze dodaje sie dodatkowe elementy, wiec raczej polecal bym JS.

Podobne pytania

0 głosów
3 odpowiedzi 1,066 wizyt
pytanie zadane 29 marca 2018 w HTML i CSS przez lukasz281992 Nowicjusz (190 p.)
0 głosów
1 odpowiedź 243 wizyt
0 głosów
1 odpowiedź 386 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 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!

...