HTML CSS, псевдокласс :hover, inline-block

365

09 января 2018, 12:27

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

Есть задача, которую нужно выполнить только с помощью 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

Answer 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

Answer 2

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

Answer 3

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

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

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