Поместите коробку-тень за родным братом в CSS

Question

Мне нужна серия div без полей и верхних и нижних теней окна, чтобы тени теней каждого div не перекрывались ни с какими-либо другими div. Я построил jsfiddle, чтобы показать, чего я пытаюсь достичь, и то, что у меня есть сейчас. Это похоже на то, что можно использовать для z-index, но я не уверен, как это сделать.

Answer 1

Поместите все ваши DIV в одну внешнюю обертку DIV. Примените тень окна к этому и к состоянию наведения каждого внутреннего DIV. Теперь каждый может управляться независимо.

<div class="outer"> 
    <div class="inner">The box shadow from each div...</div> 
    <div class="inner">...should go under each other div.</div> 
    <div class="inner">The whole thing should look...</div> 
    <div class="inner">...like one big div with a shadow...</div> 
    <div class="inner">...unless you hover over one.</div> 
</div> 

div.outer { 
    background: #fff; 
    margin: 0px auto; 
    padding: 0px; 
    width: 300px; 
    cursor: pointer; 
    box-shadow: 0px 0px 3px #999; 
    transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out; 
} 

div.outer:hover { 
    box-shadow: none; 
} 

div.inner { 
    padding: 20px; 
    transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out; 
} 

div.inner:hover { 
    padding: 20px; 
    box-shadow: 0px 0px 5px #666; 
    margin-left: -20px 
    width: 350px; 
} 

Я стиль это такой, что поле тень на внешней DIV исчезает при наведении на него, так что только парили внутренние DIV показывает тень. Регулируются по вкусу :)

Fiddle: https://jsfiddle.net/ehxsdjr8/7/

Answer 2

Вы ищете что-то вроде этого?

Fiddle

$('div').hover(
 
    function() { 
 
    $(this).addClass("hey"); 
 
    $('div').not(this).addClass("heyho"); 
 
    }, function() { 
 
     $(this).removeClass("hey"); 
 
    $('div').not(this).removeClass("heyho"); 
 
    } 
 
);

div { 
 
    background: #fff; 
 
    margin: 0px auto; 
 
    padding: 15px; 
 
    width: 300px; 
 
    cursor: pointer; 
 
    box-shadow: 0px 0px 3px #999; 
 
    transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out; 
 
} 
 
.hey{ 
 
    padding: 20px; 
 
    box-shadow: 0px 0px 5px #666; 
 
    margin: 15px auto; 
 
    width: 350px; 
 
} 
 
.heyho { 
 
    box-shadow: 0px 0px 5px #666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>The box shadow from each div...</div> 
 
<div>...should go under each other div.</div> 
 
<div>The whole thing should look...</div> 
 
<div>...like one big div with a shadow...</div> 
 
<div>...unless you hover over one.</div>

Answer 3

https://jsfiddle.net/ehxsdjr8/13

Хитрость здесь, чтобы добавить несколько теней к каждому DIV и включить их включения/выключения в случае необходимости. В этом случае добавьте верхнюю тень для первого элемента и первого элемента после зависания и измените существующую тень, чтобы она не превышала элемент.

div { 
    background: #fff; 
    margin: 0px auto; 
    padding: 15px; 
    width: 300px; 
    cursor: pointer; 
    box-shadow: 0px 3px 3px #999; 
    transition: 
     padding .1s ease-in-out, 
     width .1s ease-in-out, 
     box-shadow .1s ease-in-out; 
} 
div:hover { 
    padding: 20px; 
    box-shadow: 0px 0px 5px #666; 
    margin: 15px auto; 
    width: 350px; 
} 
div:hover + div { 
    box-shadow: 0px 3px 3px #999, 0px -3px 3px #999; 
} 
div:first-of-type { 
    box-shadow: 0px 3px 3px #999, 0px -3px 3px #999; 
} 
div:first-of-type:hover { 
    box-shadow: 0px 0px 5px #666; 
} 

Это займет много времени, чтобы посмотреть, как правильно выглядеть.