CSS

Question

ile vurgulu bir ızgara renginde her kareyi yapın CSS kullanarak gri kareler bir ızgara oluşturdum. Karelerden herhangi birinin üzerine geldiğimde hepsinin siyah olmasını istiyorum. Benim şu anki çözümüm sadece karanlığın üzerinde durduğum kareyi dönecek. Bunu sadece CSS kullanarak yapabilir miyim? Ben açıkları kullanacağını düşünün. Aşağıda kodudur:

.square { 
 
    background-color: #737373; 
 
    float: left; 
 
    position: relative; 
 
    width: 30%; 
 
    padding-bottom: 30.66%; 
 
    margin: 1.66%; 
 
} 
 
.square:hover { 
 
    background-color: black; 
 
}

<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div>

Answer 1

Daha sonra, bir kapta .square elemanları sarın aşağıdaki CSS kullanmak isteyeceksiniz.

HTML:

<div id="container"> 
    <div class ="square"></div> 
    <div class ="square"></div> 
    <div class ="square"></div> 
    ... 
</div> 

CSS

#container:hover .square{ 
    background-color:black; 
} 

Fiddle: http://jsfiddle.net/ajjr68ho/