2

Приветствую! Всех с Новым Годом и Рождеством Христовым!

Есть задача, которую нужно выполнить только с помощью CSS & HTML, сверстать такой блок:

wether

Проблема в центральном блоке - элементы с названием города и состоянием погоды - inline-block, border'ы заданы: контейнеру - 4 стороны, элементам частично.

/* рамки для элементов - УСТАНОВЛЕНЫ ЧАСТИЧНО */

.content>div:not(:last-child) {
    border-bottom: 5px solid #fff;/*всем элементам кроме последнего нижняя рамка*/
}
.content>div:nth-child(2n):not(:nth-child(10)) {
    border-right: 5px solid #fff;/*всем чётным кроме последнего рамка справа*/
}
.content>div:nth-child(2n-1):not(:nth-child(4n-1)) {
    border-right: 5px solid #fff;/* выборка оставшихся элементов рамка справа*/
}
/* ./ рамки для элементов - УСТАНОВЛЕНЫ ЧАСТИЧНО */

При наведении на центральный блок все элементы получают прозрачность кроме одного над которым курсор - это сделано.

Но при наведении должны отображаться все четыре ОДИНАРНЫЕ рамки:

wether report !!!ПРОБЛЕМА!!!

Установка верхней рамки элемента при наведении:

.moscow:hover {
    border-top:  5px  solid   #fff ;    /*при наведении кусора элементу добавляется рамка сверху*/
    margin-top:  -5px;     /*смещение элемента на 5px вверх для отображения  одинарной рамки - перекрывая нижнюю рамку верхнего элемента*/
}

Происходит все как положено, элемент растягивается по вертикали, не смещаясь и не подтягивая за собой нижний элемент, перекрывая нижнюю рамку верхнего элемента, тем самым отображается одинарная рамка со всех сторон.

Установка левой рамки элемента при наведении

weather-ffore

При установке:

.paris:hover {
    border: 5px  solid  #fff;
}

weather

Рамка удваивается и элемент сжимается.

При добавлении margin-left:

.paris:hover {
    border: 5px  solid  #fff;
    margin-left: -5px ;
}

weather

Элемент смещается, подтягивая за собой следующий элемент.

Установка padding не даёт результата, смена box-sizing на padding-box или content-box не даёт результата.

Отрицательный margin справа не даёт результата – элемент наезжает на следом идущий, тот так и остаётся смещенным.

Замена width: 25%; на min-width: 25%; - не даёт результат.

Вопрос: Как при наведении добавить элементу границу с левой стороны чтобы border был одинарный и элемент не съежал?

Весь код - https://github.com/evgenjnr/weather-forecast-test.git

css в папке css файл style.css

2
  • Используйте Flexbox и не парьтесь
    – user279382
    7 янв 2018 в 16:06
  • задание на inline-box, было бы свободное задание вопроса не было бы
    – Evgeniy R
    7 янв 2018 в 16:08

3 ответа 3

1

такой вариант:

$('.box').hover(
  
  function(){
    $(this).addClass('hover').siblings().css({'opacity': '.5'});
  },
  function(){
    $(this).removeClass('hover').siblings().css({'opacity': '1'});
  }
);
* {
  box-sizing: border-box;
}

body {
  background: #3399cc;
  padding: 0;
  margin: 0;
}


.wrap {
  max-width: 700px;
  width: 100%;
  margin: 50px auto;
  border: 2px solid #fff;
  display: flex;
  flex-flow: row wrap;
}

.box {
  text-align: center;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid #fff;
  flex: 1 25%;
}

.box:after {
  content: '';
  position: absolute;
  top: -4px;
  left:-4px;
  right: -4px;
  bottom: -4px;
  border: 4px solid #fff;
}

.box span {
  color: #fff;
  font-family: sans-serif;
}

.box-1 {
  background: #3399cc;
  flex: 1 50%;
}

.box-2 {
  background: #33cccc;
}

.box-3 {
  background: #996699;
}

.box-4 {
  background: #c24747;
}

.box-5 {
  background: #e2674a;
}

.box-6 {
  background: #ffcc66;
}

.box-7 {
  background: #99cc99;
}

.box-8 {
  background: #669999;
}

.box-9 {
  background: #cc6699;
  flex: 1 50%;
}

.box-10 {
  background: #339966;
}

.box-11 {
  background: #666699;
  flex: 1 auto;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  
<div class="wrap">
  <div class="box box-1">
    <span>Lisbon</span>
  </div>
  <div class="box box-2">
    <span>Paris</span>
  </div>
  <div class="box box-3">
    <span>Belgrade</span>
  </div>
  <div class="box box-4">
    <span>Moscow</span>
  </div>
  <div class="box box-5">
    <span>Tel Aviv</span>
  </div>
  <div class="box box-6">
    <span>Cair</span>
  </div>
  <div class="box box-7">
    <span>New York</span>
  </div>
  <div class="box box-8">
    <span>New Delhi</span>
  </div>
  <div class="box box-9">
    <span>San Francisko</span>
  </div>
  <div class="box box-10">
    <span>Tokyo</span>
  </div>
  <div class="box box-11">
    <span>Sydney</span>
  </div>
</div>
  

CodePen

2
  • это конечно щикарно, но суть без скрипта и без флексбокс
    – Evgeniy R
    7 янв 2018 в 16:33
  • в чём смысл .box:after с бордером?
    – Evgeniy R
    7 янв 2018 в 21:35
0

У вас идет перерисовка страници когда вы что-то добавляете/убираете из-за чего всё и рушится. Я такие проблемы с рамками решаю очень просто - Изначально задаю элемент с border нужной толщины, но при этом с цветом рамки по inherit; transition; (ну или там по заднему фону что б не видно было) а при hover эффектах, просто меняю border-color.

5
  • эту фишку я знаю, но при наведении получится двойная рамка - одна полупрозрачная соседнего элемента а вторая элемента под hover
    – Evgeniy R
    7 янв 2018 в 16:10
  • У вас там вроде как рамки не в 1px толщиной. В чём проблема равномерного распределения border толщины по всем блокам ? Когда сможете реализовать и красивый адаптивный вариант, и на другую строку блоки перескакивать не будут. Кстати box-sizing:border-box; Везде прописали ? 7 янв 2018 в 16:15
  • border-box абсолютно всему , за адаптивность пока речи нет, равномерное распределение - все равно при наведении получиться двойная рамка evgenjnr.github.io/weather-forecast-test
    – Evgeniy R
    7 янв 2018 в 16:27
  • Придумал ещё один вариант, хоть и костыльный - Можете просто зафиксировать у всех рамки (при наведении никаких изменений с рамками не будет), но при этом каждому блоку придать обводку через псевдокласс :after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:2px solid white; z-index:2} И по hover уже работать в этим after; 7 янв 2018 в 16:36
  • это конечно интересно, я предполагал добавить after в содержимое, но ничего не получилось, весь смысл что задание для начальной группы HTML & CSS занятий
    – Evgeniy R
    7 янв 2018 в 16:41
0

решил эту задачу - установил элементам content-box, задал с 4 сторон границы, маржинами сдвинул что бы отображалась одинарная рамка, ширину задал через calc()

visual here: https://evgenjnr.github.io/weather-forecast-test/

code here:https://github.com/evgenjnr/weather-forecast-test.git

Ваш ответ

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

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