遮蓋或隱藏箱形陰影的頂部，以顯示3側？

Question

我現在有一個div那徘徊時顯示了另一種格在它的位置，顯示的DIV在它的地方有1像素，在各方面的box-shadow，我想蓋頂影線，這樣的陰影只顯示在左，右和底部。

編輯：我想陰影留在所有4個方面，而是由頂部一個div覆蓋。不是垂直軸改變。我想知道這是否可能。

http://jsfiddle.net/8yeh9cw6/

這是可以覆蓋或者它總會帶給影子的事情上？理想情況下，純CSS，否則是可能的jQuery或JavaScript？

Answer 1

你好嘗試下面的代碼，我添加了一些jQuery的

$(".hoveredItem").mouseover(function(){ 
 
    
 
$(this).css({ 
 
\t \t "box-shadow":"0px 6px 10px rgba(0,0,0,0.9)" 
 
\t \t 
 
\t }); 
 
});

.shoptitle {overflow:hidden; background-color:#FFF; padding:15px;} 
 
.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px; margin-bottom:1px; } 
 
.I33{width:33.2%; } 
 

 
.hoveredItem{opacity:0;transition:opacity 0s 0.2s ;position:relative; background-color:#FFF; width:100%; height:200px; /* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */} 
 
.itemDisplay{ opacity:1;transition:opacity 0s 0.2s;position:relative;} 
 
.parentItem:hover .hoveredItem {opacity:1; } 
 
.parentItem:hover .itemDisplay{opacity:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="shoptitle">Cover top shadow</div> 
 

 
<div class="parentItem I33"> 
 
<div class="itemDisplay"></div> 
 
<div class="hoveredItem">hai</div> 
 
</div>

Answer 2

一個簡單的解決方案，你可以在y軸

.shoptitle { 
 
    overflow: hidden; 
 
    background-color: #FFF; 
 
    padding: 15px; 
 
} 
 
.parentItem { 
 
    height: 200px; 
 
    background-color: #e7e7e7; 
 
    float: left; 
 
    margin-left: 1px; 
 
    margin-bottom: 1px; 
 
} 
 
.I33 { 
 
    width: 33.2%; 
 
} 
 
.hoveredItem { 
 
    opacity: 0; 
 
    transition: opacity 0s 0.2s; 
 
    position: relative; 
 
    background-color: #FFF; 
 
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.9); 
 
    width: 100%; 
 
    height: 200px; 
 
    /* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */ 
 
} 
 
.itemDisplay { 
 
    opacity: 1; 
 
    transition: opacity 0s 0.2s; 
 
    position: relative; 
 
} 
 
.parentItem:hover .hoveredItem { 
 
    opacity: 1; 
 
} 
 
.parentItem:hover .itemDisplay { 
 
    opacity: 0; 
 
}

<div class="shoptitle">Cover top shadow</div> 
 

 
<div class="parentItem I33"> 
 
<div class="itemDisplay"></div> 
 
<div class="hoveredItem">hai</div> 
 
</div>

更正確的解決方案微調的影子..指 CSS box-shadow on three sides of a div?