divのホバーを修正して、欠けている辺を正しく表示するにはどうすればいいですか？

Question

私はそれにbox-shadowを持っているdivを持ち、div：hover box-shadowも持っています。

私はJSfiddleで結果をチェックすると、そのすべてがうまくいきます。

が、私は私のサイトで結果を確認するとき、私は、ボックスシャドウ右側がを削除し得る：ここで

はライブコードです：JSfiddle

そして、ここではコードです：

.nitz { 
 
    font-family: sans-serif; 
 
    font-size: 0; 
 
    width: 300px; 
 
    height: 76px; 
 
    direction: rtl; 
 
    background-color: #e4e5e8; 
 
    border-radius: 5px; 
 
    display: block; 
 
    box-shadow: inset rgba(255, 255, 255, 0.75) 0px 0px 0px 1000px, 
 
       inset rgba(255, 255, 255, 0.6) 0px 1px 0px, 
 
       inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px, 
 
        rgba(0, 0, 0, 0.2) 0px 1px 3px; 
 
} 
 
.nitz:hover { 
 
    -webkit-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1); 
 
    -moz-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1); 
 
    box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1); 
 
    background-color: #f8f8f9; 
 
    box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 
.boxtitle1 { 
 
    font-weight: bold; 
 
    text-align: right; 
 
    font-size: 14px; 
 
    padding-bottom: 3px; 
 
} 
 
.boxtitle2 { 
 
    text-align: right; 
 
    font-size: 14px; 
 
} 
 
.Cellbox2 { 
 
    display: inline-block; 
 
    margin-right: 15px; 
 
    margin-bottom: 15px; 
 
    vertical-align: top; 
 
    margin-top: 20px; 
 
}

<a href="https://www.google.com" rel=""> 
 
    <div class="nitz"> 
 
    <div class="Cellbox2"> 
 
     <div class="boxtitle1">That is a big test</div> 
 
     <div class="boxtitle2">That is a small one</div> 
 
    </div> 
 
    </div> 
 
</a>

DIVS上

ザは、次のとおり

ipsWidget ipsWidget_vertical ipsBox

ipsWidget ipsWidget_vertical ipsBox

と

ipsList_reset

上記のすべてのdivs

。

そのdiv要素のCSSは以下のとおりです。

/* Blocks - styles for various widgets */ 

.ipsWidget { 
    position: relative; 
    padding: 0; 
    background: #fff; 
} 

.ipsWidget.ipsWidget_vertical { 
    margin-top: 15px; 
} 

    .ipsWidget.ipsWidget_vertical .ipsWidget_title { 
     padding: 10px; 
     margin: 0; 
     font-size: 14px; 
     font-weight: 400; 
     position: relative; 
     color: #fff; 
     background: {theme="widget_title_bar"}; 
     border-radius: 2px 2px 0px 0px; 
    } 

.ipsWidget_inner{ 
     padding: 10px; 
} 

    .ipsWidget.ipsWidget_vertical .ipsWidget_inner { 
     color: #575757; 

    } 

.ipsWidget.ipsWidget_horizontal { 
    padding: 0 0 10px 0; 
} 

    .ipsWidget.ipsWidget_horizontal:not(.ipsWidgetHide) + .ipsWidget { 
     margin-top: 10px; 
    } 

     .ipsWidget.ipsWidget_horizontal .ipsWidget_title { 
      font-weight: 400; 
      margin-bottom: 10px; 
      background: #f5f5f5; 
      padding: 10px; 
     } 

    .ipsWidget.ipsWidget_vertical .ipsWidget_inner { 
     color: #575757; 
    } 

    .ipsWidget.ipsWidget_horizontal .ipsTabs { 
     margin: -5px 0 5px 0; 
    } 

     .ipsWidget.ipsWidget_horizontal .ipsTabs_panel { 
      background: #fff; 
      margin: 0; 
     } 

.ipsWidget_columns > [class*="ipsGrid"] { 
    margin-bottom: 0; 
    border-bottom: 0; 
} 

html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] { 
    border-right: 1px solid rgba(0,0,0,0.1); 
    padding-right: 10px; 
} 
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] { 
    border-left: 1px solid rgba(0,0,0,0.1); 
    padding-left: 10px; 
} 

    html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"]:last-child { 
     border-right: 0; 
    } 
    html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"]:last-child { 
     border-left: 0; 
    } 

.ipsWidget_horizontal .ipsWidget_statsCount { 
    font-size: 22px; 
    line-height: 32px !important; 
    font-weight: 300; 
} 

.ipsWidget_horizontal .ipsWidget_stats { 
    margin-top: 15px; 
} 

.ipsWidget .ipsTabs_small { 
    padding: 0; 
    background: transparent; 
} 

    .ipsWidget .ipsTabs_small .ipsTabs_item:not(.ipsTabs_activeItem) { 
     color: rgba(50,50,50,0.6); 
     border-bottom: 1px solid transparent; 
    } 

    .ipsWidget .ipsTabs_small .ipsTabs_activeItem { 
     border-bottom: 1px solid rgba(0,0,0,0.25); 
    } 

.ipsWidget .ipsDataItem_title { 
    font-size: 13px; 
} 

.ipsWidget.ipsWidget_primary { 
    background: #262e33; 
} 

    .ipsWidget.ipsWidget_primary h3 { 
     color: #fff; 
    } 

html[dir="ltr"] .ipsWidget_latestItem { 
    margin-left: 85px; 
} 
html[dir="rtl"] .ipsWidget_latestItem { 
    margin-right: 85px; 
} 

.ipsWidgetBlank { 
    margin-top: 16px; 
    padding-top: 30px; 
} 

Answer 1

私は問題はあなたがリンクされたコードから来ていないかなり確信しています。 むしろ、あなたのボタンはoverflow : hidden divの境界にあり、影がそのdivの外に落ちているようです。 また、シャドーを隠すボタンの横にもう1つの目に見えないdivがあります。

そのスニペットを見て、シャドウの一部が表示されない理由を確認します。このボタンは、親（「テスト」）divの右上にあります。 私はあなたのコードを確認することはできませんが、私はこの問題は、親のdivから来ていると思います（あなたは幅を修正していない、それは右ボタンの後に停止しているかもしれないので）

.test { 
 
    display: block 
 
    width: 400px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 

 
.nitz { 
 
    font-family:sans-serif; 
 
    font-size: 0; 
 
    float: right; 
 
    width:300px; 
 
    height:76px; 
 
    direction:rtl; background-color:#e4e5e8;border-radius: 5px; 
 
display:block; 
 
box-shadow: inset rgba(255,255,255,0.75) 0px 0px 0px 1000px, 
 
    inset rgba(255,255,255,0.6) 0px 1px 0px, 
 
    inset rgba(255,255,255,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 3px; 
 
} 
 

 
.nitz:hover {-webkit-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1); 
 
-moz-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1); 
 
box-shadow: 0px 0px 5px 6px rgba(251,219,90,1); 
 
background-color:#f8f8f9; 
 
    box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 
.boxtitle1 {font-weight: bold;text-align:right; font-size:14px; padding-bottom:3px;} 
 
.boxtitle2 {text-align:right; font-size:14px;} 
 
    
 

 
.Cellbox1 
 
{width:50px; height:50px; display:inline-block; margin-bottom:15px; margin-right:15px; margin-top:15px; } 
 
.Cellbox2 
 
{display:inline-block; margin-right:15px; margin-bottom:15px; vertical-align:top; margin-top:20px;}

<div class="test"> 
 
<a href="https://www.google.com" rel=""> 
 
<div class="nitz">  
 
    
 
     
 
    <div class="Cellbox2"> 
 
<div class="boxtitle1">That is a big test</div> 
 

 
<div class="boxtitle2">That is a small one</div> 
 
    </div> 
 
    </div> 
 
    </a> 
 
</div>

Answer 2

することができますいくつかのクラス名を持つ親「アンカー」タグにいくつかのパディングを追加してください

.some-class-name { 
    padding: 0 15px; 
    display: inline-block; 
    box-sizing: border-box; 
}