Страницы

Поиск по вопросам

среда, 4 марта 2020 г.

Css: внутренняя тень на элементах и hover

#css #hover


Есть проблема, не могу найти решения.
Есть блок, у него внутренняя тень. Что бы тень накладывалась на элементы приходиться
ставить отрицательный z-index.



.content {
  height: 140px;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  padding: 20px 10px 10px 10px;
  box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1);
  backgound-color: yellow;
  border: 1px solid black;
  width: 300px;
}

.item {
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
  z-index: -1;
  position: relative;
}

.item:hover {
  background-color: red;
}
Но тогда перестаёт работать hover. Убираю отрицательный z-index. Тень на падает на элементы внутри блока. .content { height: 140px; overflow-x: auto; white-space: nowrap; overflow-y: hidden; padding: 20px 10px 10px 10px; box-shadow: inset 0px 0px 15px 10px rgba(0,0,0,1); backgound-color: yellow; border: 1px solid black; width: 300px; } .item{ height: 100px; width: 100px; background-color: yellow; display: inline-block; cursor: pointer; } .item:hover{ background-color: red; }


Ответы

Ответ 1



Быть может такой вариант подойдет. Правда скролл получается внутри. .content { padding: 20px 10px 0 10px; width: 300px; height: auto; box-sizing: border-box; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .item{ height: 100px; width: 100px; background-color: yellow; display: inline-block; cursor: pointer; position: relative; } .item:hover{ background-color: red; } .wrapper { border: 1px solid black; box-sizing: border-box; width: 300px; overflow: hidden; position: relative; padding-bottom: 20px; } .shadow-top, .shadow-right, .shadow-bottom, .shadow-left { box-shadow: 0 0 15px 10px rgba(0,0,0,1); position: absolute; } .shadow-right, .shadow-left { height: 100%; width: 0; top: 0; } .shadow-top, .shadow-bottom { width: 300px; height: 0; left: 0; } .shadow-top { top: 0; } .shadow-right { right: 0; } .shadow-bottom { bottom: 0; } .shadow-left { left: 0; }
Вариант с JS (jQuery). Если стилей много, то лучше менять класс, а не стили. var items = []; getItemsPos(); function getItemsPos() { $('.item', '.content').each(function(index) { var offset = $(this).offset(); items[index] = { 'minX': offset.left, 'minY': offset.top, 'maxX': offset.left + $(this).width() - 1, 'maxY': offset.top + $(this).height() - 1, }; }); }; function itemHover(index) { var cX = event.pageX, cY = event.pageY; return (cY <= items[index].maxY && cY >= items[index].minY) && (cX <= items[index].maxX && cX >= items[index].minX); } $('.content').mousemove(function(e) { $('.item', $(this)).css('background-color', 'yellow'); $(this).css('cursor', 'default'); for (i = 0; i < items.length; i++) { if (itemHover(i) === true) { $('.item', $(this)).eq(i).css('background-color', 'red'); $(this).css('cursor', 'pointer'); } } }); $('.content').mouseout(function(e) { $('.item', $(this)).css('background-color', 'yellow'); $(this).css('cursor', 'default'); }); $('.content').scroll(function(e) { getItemsPos(); });

Ответ 2



С помощью javascript и pointer-events:none; это можно сделать так: shadowHeight(); window.addEventListener('resize', function() { // на случай, если при адаптиве высота блока будет меняться shadowHeight(); }); function shadowHeight() { var block = document.getElementsByClassName('inner')[0]; var shadow = document.getElementsByClassName('shadow')[0]; shadow.style.height = block.clientHeight + 'px'; // устанавливаем тени высоту, равную внутреннему контенту } .content { width: 300px; position: relative; } .inner { padding: 20px 10px; overflow-x: auto; white-space: nowrap; overflow-y: hidden; border: 1px solid black; position: relative; } .shadow { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1); pointer-events: none; } .item { height: 100px; width: 100px; background-color: yellow; display: inline-block; cursor: pointer; } .item:hover { background-color: red; }
Если же прокрутки внутри блока нет, то данная задача решается в разы проще: .content { width: 318px; padding: 20px 10px; white-space: nowrap; border: 1px solid black; position: relative; } .content:after { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; content: ''; box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1); pointer-events: none; } .item { height: 100px; width: 100px; background-color: yellow; display: inline-block; cursor: pointer; } .item:hover { background-color: red; }


Комментариев нет:

Отправить комментарий