1

Есть скрытый контент, который появляется в блоке при ховере на родителя. Так же есть некоторый padding который тоже появляется при наведении. Вследствие чего, сдвигаются другие блоки. Как сделать так, чтобы они не уезжали? Скрин ниже.

введите сюда описание изображения

Пример одного блока:

.content .hides {
	display: none;
}
.hides {
	position: relative;
}
.hides .fa-shopping-basket {
	background-color: #f15927;
	padding: 5px 10px;
	border-radius: 3px;
	color: #fff;
	margin-left: 23px;
	font-size: 15px;
}
.itempos {
	margin-top: 20px;
	margin-bottom: 40px;
}
.hides:hover {
	display: block;
}
.itempos:hover .hides {
display: block;
}
.itempos:hover {
	border: 3px solid blue;
	padding-left: 0;
	padding-right: 0;
}
.itempos:hover .itemcont {
	padding: 15px;
}
<div class="col-md-2 itempos">
  <div class="itemcont">
    <div class="image">
      <img class="img-responsive" src="img/pos1.png" alt="">
    </div>
    <a href="" class="name">Диск сцепления ClutchNet (6-ти лепестковая металлокерамика с демпфером)</a>
    <a href="" class="category">Трансмиссия </a>
    <div class="price">8 600 руб. <span>9900 руб.</span>
    </div>
    <div class="hides">
      <a class="podr" href="">Подробнее</a>
      <a class="crt" href=""><i class="fa fa-shopping-basket fa-1x" aria-hidden="true"></i></a>
    </div>
  </div>
</div>

6
  • Использовал display: flex; flex-wrap: wrap; , уже лучше, но всё равно вместо одного элемента вниз сдвигается вся строка. Можно ли как-то вообще не сдвигать их? 11 авг 2016 в 9:19
  • Ну или .itempos:nth-child(6n+1) { clear: left; }, если не хотите заморачиваться с flexbox. Псевдокласс :nth-child
    – qodunpob
    11 авг 2016 в 9:20
  • вы хотите чтобы верхний элемент перекрывал нижний?
    – qodunpob
    11 авг 2016 в 9:25
  • При наведении - да. 11 авг 2016 в 9:29

2 ответа 2

3

html {
  font-family: sans-serif;
  font-size: .9em;
}
body {
  padding: 15px;
}
.title {
  margin: 0 0 15px;
  font-size: 1.5rem;
}
.entry-list {
  margin: 0 -10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 330px;
  list-style: none;
}
.entry-list_i {
  margin: 0 0 15px;
  padding: 0;
  width: 33%;
}
.entry {
  padding: 10px;
  position: relative;
  border: 1px solid transparent;
  border-bottom: none;
}
.entry_title {
  margin: 0 0 10px;
  font-size: 1.2rem;
}
.entry_hidden {
  padding: 0 10px 10px;
  position: absolute;
  left: -1px;
  right: -1px;
  display: none;
  box-sizing: border-box;
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  border-top: none;
}
.entry:hover {
  z-index: 10;
  border-color: #66aacc;
}
.entry:hover .entry_hidden {
  display: block;
}
<section>
  <h1 class="title">Item List</h1>
  <ul class="entry-list">
    <li class="entry-list_i">
      <article class="entry">
        <h2 class="entry_title">Item #1</h2>
        <p>Description</p>
        <a href="#">Link</a>
        <div class="entry_hidden">
          <p>Hidden block</p>
          <a href="#">Hidden link</a>
        </div>
      </article>
    </li>
    <li class="entry-list_i">
      <article class="entry">
        <h2 class="entry_title">Item #2</h2>
        <p>Description</p>
        <a href="#">Link</a>
        <div class="entry_hidden">
          <p>Hidden block</p>
          <a href="#">Hidden link</a>
        </div>
      </article>
    </li>
    <li class="entry-list_i">
      <article class="entry">
        <h2 class="entry_title">Item #3</h2>
        <p>Description</p>
        <a href="#">Link</a>
        <div class="entry_hidden">
          <p>Hidden block</p>
          <a href="#">Hidden link</a>
        </div>
      </article>
    </li>
    <li class="entry-list_i">
      <article class="entry">
        <h2 class="entry_title">Item #4</h2>
        <p>Description</p>
        <a href="#">Link</a>
        <div class="entry_hidden">
          <p>Hidden block</p>
          <a href="#">Hidden link</a>
        </div>
      </article>
    </li>
    <li class="entry-list_i">
      <article class="entry">
        <h2 class="entry_title">Item #5</h2>
        <p>Description</p>
        <a href="#">Link</a>
        <div class="entry_hidden">
          <p>Hidden block</p>
          <a href="#">Hidden link</a>
        </div>
      </article>
    </li>
    <li class="entry-list_i">
      <article class="entry">
        <h2 class="entry_title">Item #6</h2>
        <p>Description</p>
        <a href="#">Link</a>
        <div class="entry_hidden">
          <p>Hidden block</p>
          <a href="#">Hidden link</a>
        </div>
      </article>
    </li>
    <li class="entry-list_i">
      <article class="entry">
        <h2 class="entry_title">Item #7</h2>
        <p>Description</p>
        <a href="#">Link</a>
        <div class="entry_hidden">
          <p>Hidden block</p>
          <a href="#">Hidden link</a>
        </div>
      </article>
    </li>
  </ul>

-2

Очевидно объединять каждый ряд блоков в отдельный блок-контейнер. В любом другом случае все блоки будут сами за себя. Или сделать всем блокам абсолютное позиционирование, тогда они не будут сдвигаться со своих мест. В любом случае, это задача не для css.

Ваш ответ

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

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