var wrappers = document.querySelectorAll('.wrapper');
var closse = document.querySelectorAll('.rec');
for (var i = 0; i<wrappers.length; i++) {
wrappers[i].onclick = function() {
this.firstElementChild.style.display = 'block';
rec[i].onclick = function() {
}
};
};
.wrapper {
width: 100px;
height: 100px;
border: 2px solid blue;
display: inline-block;
cursor:pointer;
margin: 10px;
position: relative;
}
.some {
display: none;
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.2);
}
.rec {
width: 20px;
height: 3px;
background-color: black;
position: absolute;
right: 4px;
top: 10px;
}
<div class="wrapper">
<div class="some">
<div class="rec"></div>
</div>
</div>
<div class="wrapper">
<div class="some">
<div class="rec"></div>
</div>
</div>
<div class="wrapper">
<div class="some">
<div class="rec"></div>
</div>
</div>
<div class="wrapper">
<div class="some">
<div class="rec"></div>
</div>
</div>
Существует 4 div'a при нажатии на которые они затемняются и на них появляется черточка, как сделать так, что бы при нажатии на черточку затемнение пропадало?