Проблемы с блоком после :hover

306

24 ноября 2016, 10:15

Как видно из примера что после :hover остаётся место от скрола, и так же после скрола в низ - само содержимое остаётся на месте - по замыслу должно вернуться в исходное состояние и без этого места от скролла , каким способом этого можно добиться ?

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
} 
img { 
  display: block; 
  max-width: 100%; 
  height: auto; 
} 
.mw { 
  width: 220px; 
  height: 318px; 
  border: 1px solid #ccc; 
  margin: 10px; 
  overflow: hidden; 
} 
.img, 
.text { 
  width: 90%; 
  border: 1px solid #ccc; 
  margin: 10px auto; 
} 
.mw:hover { 
  overflow: auto; 
}

<div class="mw"> 
  <div class="img"> 
    <img src="http://img-fotki.yandex.ru/get/5206/natali73123.157/0_3dab0_8a253738_L.png" alt="Шуба"> 
  </div> 
  <div class="text"> 
    <ul> 
      <li><a href="">  -Что такое «пластины» и «роспуск»?</a> 
      </li> 
      <li><a href=""> 
-Какие шкурки лучше — самца или самки?</a> 
      </li> 
      <li><a href=""> 
-Как происходит выделка и обработка шкур?</a> 
      </li> 
      <li><a href=""> 
-Крашение и стрижка - какая норка лучше: натуральная, крашеная, тонированная, стриженная?</a> 
      </li> 
    </ul> 
  </div> 
</div>

Answer 1

Как вариант задать ширину в пикселях для .img, .text и margin: 10px auto заменить на margin: 10px. А возврат прокрутки - на js, когда курсор покидает элемент - задавать scrolltop = 0

var el = document.querySelector('.mw'); 
el.onmouseleave = function() { 
    el.scrollTop = 0; 
 }

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
} 
img { 
  display: block; 
  max-width: 100%; 
  height: auto; 
} 
.mw { 
  width: 220px; 
  height: 318px; 
  border: 1px solid #ccc; 
  margin: 10px; 
  overflow: hidden; 
} 
.img, 
.text { 
  width: 198px; 
  border: 1px solid #ccc; 
  margin: 10px; 
} 
.mw:hover { 
  overflow: auto; 
}

<div class="mw"> 
  <div class="img"> 
    <img src="http://img-fotki.yandex.ru/get/5206/natali73123.157/0_3dab0_8a253738_L.png" alt="Шуба"> 
  </div> 
  <div class="text"> 
    <ul> 
      <li><a href="">  -Что такое «пластины» и «роспуск»?</a> 
      </li> 
      <li><a href=""> 
-Какие шкурки лучше — самца или самки?</a> 
      </li> 
      <li><a href=""> 
-Как происходит выделка и обработка шкур?</a> 
      </li> 
      <li><a href=""> 
-Крашение и стрижка - какая норка лучше: натуральная, крашеная, тонированная, стриженная?</a> 
      </li> 
    </ul> 
  </div> 
</div>