1

Как сделать чтобы появлялся всплывающий блок при наведений на ячейку в таблицу "иностранный язык".

.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>

2 ответа 2

2

Всё что нам нужно, это взять "всплывающий блок" и добавить его в место, при наведение на которое, этот блок должен появиться.
В вашем случае, я положил его в <div class="cn2">Иностранный язык</div>.

Далее я добавил блок .cn2 класс .open-descr, чтобы повесить на этот класс :hover эффект, в результате чего при наведение на "Иностранный язык" появляется "всплывающий блок".

.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;
}

.open-descr:hover .descr {
  display: block;
  position: absolute;
  top: 120px;
  z-index: 9999;
  width: 400px;
}

.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);
}
<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 open-descr">
      Иностранный язык
      <div class="descr">
        Какой-то текст который должен быть в блоке<br>
        <a href="#">Интересная ссылка</a>
      </div>
    </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>

1

С помощью CSS это недостижимо. Чтобы отслеживать события необходимо применение JS и событие вида onmouse.

Подробнее изучать здесь:

http://learn.javascript.ru/introduction-browser-events
learn.javascript.ru/mouse-clicks
learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave
htmlbook.ru/html/attr/onmouseover

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.