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

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ź

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.