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

Witam. Czy wie ktoś może jak zrobić efekt w którym po najechaniu na jeden div reszta się zaciemnia?

+5 głosów
234 wizyt
pytanie zadane 5 kwietnia 2015 w HTML i CSS przez SikorKK Użytkownik (610 p.)

5 odpowiedzi

+6 głosów
odpowiedź 5 kwietnia 2015 przez Harsay Pasjonat (23,420 p.)
edycja 5 kwietnia 2015 przez Harsay
 
Najlepsza

Jest to możliwe dla elementu występującym po danym divie.

#niezaciemniaj:hover + #zaciemniaj {
    background: black;
    color: black;
}
<div id="niezaciemniaj">Najedź na mnie to zaciemnisz diva pode mną</div>
<div id="zaciemniaj">Nie pls... :<</div> 

Można to sprawniej zrobić za pomocą Javascriptu.

Rozwiązanie CSS + Javascript

W tym wypadku wykonamy pewien trik. Przy najechaniu na odpowiedni div wyświetlimy większego diva przykrywającego inne elementy oprócz tego co chcemy widzieć.

CSS:

  #cien {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #333;
    z-index: 10;
    display: none;
  }

  #najedz {
  	background: white;
  	width: 200px;
  	height: 200px;
  	z-index: 10;
  	border: 1px solid #333;
  	float: left;
  }

  #inne {
  	width: 200px;
  	height: 200px;
  	background: white;
  	border: 1px solid #333;
  	float: left;
  }

Javascript:

var najedz = document.getElementById("najedz");
var cien = document.getElementById("cien");

najedz.onmouseover = function() {
	var box = najedz.getBoundingClientRect();
	najedz.style.left = box.left;
	najedz.style.top = box.top;
	cien.style.display = "inline";
	najedz.style.position = "fixed";
}

najedz.onmouseout = function() {
	cien.style.display = "none";
	najedz.style.position = "static";
}

HTML:

<div id="cien"></div>
<div id="inne">witam</div>
<div id="najedz">Najedz na mnie</div>
<div id="inne">witam ponownie</div>

 

komentarz 5 kwietnia 2015 przez Harsay Pasjonat (23,420 p.)
Dodałem roziwiązanie JS + CSS.
komentarz 5 kwietnia 2015 przez SikorKK Użytkownik (610 p.)
edycja 5 kwietnia 2015 przez SikorKK
Dzięki za odpowiedz, lecz połączenie JS i CSS nie działa u mnie.
komentarz 5 kwietnia 2015 przez Harsay Pasjonat (23,420 p.)
<style>
  #cien {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #333;
    z-index: 10;
    display: none;
  }

  #najedz {
  	background: white;
  	width: 200px;
  	height: 200px;
  	z-index: 10;
  	border: 1px solid #333;
  	float: left;
  }

  #inne {
  	width: 200px;
  	height: 200px;
  	background: white;
  	border: 1px solid #333;
  	float: left;
  }
</style>


<div id="cien"></div>
<div id="inne">witam</div>
<div id="najedz">Najedz na mnie</div>
<div id="inne">witam ponownie</div>



<script>

var najedz = document.getElementById("najedz");
var cien = document.getElementById("cien");

najedz.onmouseover = function() {
	var box = najedz.getBoundingClientRect();
	najedz.style.left = box.left;
	najedz.style.top = box.top;
	cien.style.display = "inline";
	najedz.style.position = "fixed";
}

najedz.onmouseout = function() {
	cien.style.display = "none";
	najedz.style.position = "static";
}

</script>

Zapisz to u siebie w pliku html i uruchom w przeglądarce.

komentarz 5 kwietnia 2015 przez SikorKK Użytkownik (610 p.)
<!DOCTYPE HTML>
<html lang="pl">
<meta charset = "UTF-8">
<title>Delta</title>
<script type="text/javascript">
var najedz = document.getElementById("najedz");
var cien = document.getElementById("cien");
 
najedz.onmouseover = function() {
    var box = najedz.getBoundingClientRect();
    najedz.style.left = box.left;
    najedz.style.top = box.top;
    cien.style.display = "inline";
    najedz.style.position = "fixed";
}
 
najedz.onmouseout = function() {
    cien.style.display = "none";
    najedz.style.position = "static";
}
</script>
<style>
  #cien {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #333;
    z-index: 10;
    display: none;
  }
 
  #najedz {
    background: white;
    width: 200px;
    height: 200px;
    z-index: 10;
    border: 1px solid #333;
    float: left;
  }
 
  #inne {
    width: 200px;
    height: 200px;
    background: white;
    border: 1px solid #333;
    float: left;
</style>
</head>
<body>
<div id="cien"></div>
<div id="inne">witam</div>
<div id="najedz">Najedz na mnie</div>
<div id="inne">witam ponownie</div>
</body>
</html>

Dlaczego w takiej formie to nie działa?

komentarz 5 kwietnia 2015 przez nefil1m Stary wyjadacz (10,680 p.)
Zrobiłem z tego fiddle'a i się crashuje:
http://jsfiddle.net/2r4wjbrp/
komentarz 5 kwietnia 2015 przez Harsay Pasjonat (23,420 p.)

Nie działa, ponieważ skrypt jest ładowany przed powstaniem elementów w DOM.

Daj skrypt na sam koniec lub przerób skrypt na:

window.onload = function() {
    var najedz = document.getElementById("najedz");
    var cien = document.getElementById("cien");
  
    najedz.onmouseover = function() {
        var box = najedz.getBoundingClientRect();
        najedz.style.left = box.left;
        najedz.style.top = box.top;
        cien.style.display = "inline";
        najedz.style.position = "fixed";
    }
      
    najedz.onmouseout = function() {
        cien.style.display = "none";
        najedz.style.position = "static";
    }
}

Wtedy załaduje się dopiero po załadowaniu dokumentu.

komentarz 5 kwietnia 2015 przez SikorKK Użytkownik (610 p.)
dzięki bardzo teraz działa :D
komentarz 5 kwietnia 2015 przez Black hunter Użytkownik (500 p.)
używaj class zamiast id. klas może być kilka takich samych natomiast id już nie.

 

o class:

http://www.kurshtml.edu.pl/css/klasy_selektorow,specjalne.html

o id:

http://www.kurshtml.edu.pl/css/selektor_identyfikatora,specjalne.html

ściąga do powieszenia na ścianie

http://www.standardista.com/wp-content/uploads/2012/01/specificity3.pdf
0 głosów
odpowiedź 5 kwietnia 2015 przez nefil1m Stary wyjadacz (10,680 p.)

Na szybko udało mi się wymyśleć takie rozwiązanie, jednak ma ono kilka wad.

Działające demo: http://jsfiddle.net/2r4wjbrp/3/

Na początek potrzebujesz taką strukturę:

<div class="parent">
    <div class="child">
        <div></div>
    </div>
    <div class="child">
        <div></div>
    </div>
    <div class="child">
        <div></div>
    </div>
</div>

Następnie trochę styli:
 

div {
    transition: all .3s;
}

.child, .child div {
    width: 200px;
    height: 200px;
}

.child {
    background: #c00;
    float: left;
    margin: 5px;
}

.parent:hover .child {
    background: #a00;
}

.child:hover > div {
    background: #f00;
}

Wydaje mi się, że kod jest na tyle prosty, że nie trzeba tłumaczyć. Minusem jest to, że potrzebujesz dodatkowego diva w .child. Problem ten jednak znika jeśli uda Ci się ostylować to co masz w divie tak, żeby działało na przykładzie.

–1 głos
odpowiedź 5 kwietnia 2015 przez krecik1334 Maniak (58,910 p.)
Myślę, że dałoby się napisać to w JavaScript/jQuery.
komentarz 5 kwietnia 2015 przez SikorKK Użytkownik (610 p.)
A czy w CSS3 nie da rady?
komentarz 5 kwietnia 2015 przez krecik1334 Maniak (58,910 p.)
Możliwe, ale nie znam takiej opcji (może dlatego że słabo znam CSS xD). Wiem że w JS to na pewno by się dało.
–1 głos
odpowiedź 5 kwietnia 2015 przez marqos12 Obywatel (1,840 p.)
Można użyć pseudoklasy hover, ale ona działa na div na którym jest kursor a nie na reszte strony.
–1 głos
odpowiedź 5 kwietnia 2015 przez SikorKK Użytkownik (610 p.)
Dzięki za odpowiedz.

Podobne pytania

0 głosów
1 odpowiedź 107 wizyt
+1 głos
2 odpowiedzi 133 wizyt
pytanie zadane 19 lipca 2017 w HTML i CSS przez Sebastian Szyja Obywatel (1,510 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

61,355 zapytań

107,301 odpowiedzi

223,469 komentarzy

33,076 pasjonatów

Przeglądających: 303
Pasjonatów: 10 Gości: 293

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...