Приветствую! Всех с Новым Годом и Рождеством Христовым!
Есть задача, которую нужно выполнить только с помощью CSS & HTML, сверстать такой блок:
Проблема в центральном блоке - элементы с названием города и состоянием погоды - 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;/* выборка оставшихся элементов рамка справа*/
}
/* ./ рамки для элементов - УСТАНОВЛЕНЫ ЧАСТИЧНО */
При наведении на центральный блок все элементы получают прозрачность кроме одного над которым курсор - это сделано.
Но при наведении должны отображаться все четыре ОДИНАРНЫЕ рамки:
Установка верхней рамки элемента при наведении:
.moscow:hover {
border-top: 5px solid #fff ; /*при наведении кусора элементу добавляется рамка сверху*/
margin-top: -5px; /*смещение элемента на 5px вверх для отображения одинарной рамки - перекрывая нижнюю рамку верхнего элемента*/
}
Происходит все как положено, элемент растягивается по вертикали, не смещаясь и не подтягивая за собой нижний элемент, перекрывая нижнюю рамку верхнего элемента, тем самым отображается одинарная рамка со всех сторон.
Установка левой рамки элемента при наведении
При установке:
.paris:hover {
border: 5px solid #fff;
}
Рамка удваивается и элемент сжимается.
При добавлении margin-left
:
.paris:hover {
border: 5px solid #fff;
margin-left: -5px ;
}
Элемент смещается, подтягивая за собой следующий элемент.
Установка 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