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

odpowiedź 5 kwietnia 2015 przez Harsay Pasjonat (23,640 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,640 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,640 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,690 p.)

Zrobiłem z tego fiddle'a i się crashuje:
http://jsfiddle.net/2r4wjbrp/

komentarz 5 kwietnia 2015 przez Harsay Pasjonat (23,640 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

odpowiedź 5 kwietnia 2015 przez nefil1m Stary wyjadacz (10,690 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.