Есть проблема, не могу найти решения.
Есть блок, у него внутренняя тень. Что бы тень накладывалась на элементы приходиться ставить отрицательный 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; }
Ответ
Быть может такой вариант подойдет. Правда скролл получается внутри.
.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(); });
Комментариев нет:
Отправить комментарий