Как сделать чтобы появлялся всплывающий блок при наведений на ячейку в таблицу "иностранный язык".
.container1 {
border: solid 1px black;
margin: 1px;
display: inline-block;
width: 732px;
}
.cnn1 {
border: solid 1px black;
margin: 1px;
display: inline-block;
margin: 1px;
width: 100px;
}
.cnn1#cnn2 {
width: 400px;
}
.cn2 {
border: solid 1px black;
display: block;
text-align: center;
height: 20px;
}
.cn2:nth-child(even) {
background: #FFFACD;
}
.cnn1:nth-child(even) {
background: #E9967A;
}
.cn2:empty {
background: #00FF7F;
}
.cn2#prg {
background: #40E0D0;
}
.descr {
display: none;
margin-left: -350px;
padding: 10px;
margin-top: 17px;
background: #f3f3f3;
height: 200px;
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
.container1:hover .descr {
display: block;
position: absolute;
top: 120px;
z-index: 9999;
width: 400px;
}
<div class="container1">
<div class="cnn1">
<div class="cn2">Понедельник</div>
<div class="cn2">Понедельник</div>
<div class="cn2">Понедельник</div>
</div>
<div class="cnn1">
<div class="cn2">8.00-9.30</div>
<div class="cn2">9.40-11.10</div>
<div class="cn2">11.20-12.50</div>
</div>
<div class="cnn1" id="cnn2">
<div class="cn2">Проектирование и разработка интерфейса пользователя</div>
<div class="cn2">Проектирование и разработка интерфейса пользователя</div>
<div class="cn2">Проектирование и разработка интерфейса пользователя</div>
</div>
<div class="cnn1">
<div class="cn2">303</div>
<div class="cn2">303</div>
<div class="cn2">201</div>
</div>
<div class="cnn1">
<div class="cn2"></div>
<div class="cn2">Вторник</div>
<div class="cn2">Вторник</div>
<div class="cn2">Вторник</div>
</div>
<div class="cnn1">
<div class="cn2">8.00-9.30</div>
<div class="cn2">9.40-10.10</div>
<div class="cn2">10.20-11.50</div>
<div class="cn2">12.00-13.30</div>
</div>
<div class="cnn1" id="cnn2">
<div class="cn2"></div>
<div class="cn2">Кураторский час</div>
<div class="cn2">Графический дизайн и мультимедиа</div>
<div class="cn2">Численные методы</div>
</div>
<div class="cnn1">
<div class="cn2">303</div>
<div class="cn2">303</div>
<div class="cn2">303</div>
<div class="cn2">304</div>
</div>
<div class="cnn1">
<div class="cn2">Среда</div>
<div class="cn2">Среда</div>
<div class="cn2">Среда</div>
</div>
<div class="cnn1">
<div class="cn2">8.00-9.30</div>
<div class="cn2">9.40-11.10</div>
<div class="cn2">11.20-12.50</div>
</div>
<div class="cnn1" id="cnn2">
<div class="cn2"></div>
<div class="cn2" id="prg">Проектирование и разработка веб-приложений</div>
<div class="cn2" id="prg">Проектирование и разработка веб-приложений</div>
</div>
<div class="cnn1">
<div class="cn2">303</div>
<div class="cn2">303</div>
<div class="cn2">201</div>
</div>
<div class="cnn1">
<div class="cn2"></div>
<div class="cn2">Четверг</div>
<div class="cn2">Четверг</div>
</div>
<div class="cnn1">
<div class="cn2">8.00-9.30</div>
<div class="cn2">9.40-11.10</div>
<div class="cn2">11.20-12.50</div>
</div>
<div class="cnn1" id="cnn2">
<div class="cn2">Графический дизайн и мультимедиа</div>
<div class="cn2">Графический дизайн и мультимедиа</div>
<div class="cn2">Графический дизайн и мультимедиа</div>
</div>
<div class="cnn1">
<div class="cn2">303</div>
<div class="cn2">303</div>
<div class="cn2">201</div>
</div>
<div class="cnn1">
<div class="cn2">Пятница</div>
<div class="cn2">Пятница</div>
<div class="cn2">Пятница</div>
</div>
<div class="cnn1">
<div class="cn2">8.00-9.30</div>
<div class="cn2">9.40-11.10</div>
<div class="cn2">11.20-12.50</div>
</div>
<div class="cnn1" id="cnn2">
<div class="cn2" id="prg">Проектирование и разработка веб-приложений</div>
<div class="cn2">Иностранный язык</div>
<div class="cn2">Физкультура</div>
</div>
<div class="cnn1">
<div class="cn2">303</div>
<div class="cn2">303</div>
<div class="cn2">201</div>
</div>
<div class="descr">
Какой-то текст который должен быть в блоке<br>
<a href="#">Интересная ссылка</a>
</div>
</div>