CSS div元素使悬停区域变大

我有一个div元素，宽100px，高100px。在它里面，我有另一个元素，宽100px，高80px，有边框，我让它在悬停时消失，但我需要它在悬停时在父元素上消失，在下面的20px上也一样。我希望我的问题很清楚^^

父分区：

.whilelist
{   
    display: block;     
    float: right;
    width: 226px;
    height: 210px;  
    margin-left: 5px;
    margin-bottom: 10px;
    border-style: solid;
    border-width: 3px;
    border-color: white; 
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px; 
    text-align: center; 
}

.whilelist:hover
{           
    border-style: solid;
    border-width: 3px;
    border-color: #C0C0C0;  
}

和内部：

.whilebilder
{           
    width: 220px;
    height: 180px;
    border-style: solid;
    border-width: 1px;
    border-color: #C0C0C0;
    padding-left: 2px;
    padding-right: 2px; 
}

.whilebilder:hover
{           
    border-style: solid;
    border-width: 1px;
    border-color: white;    
}

---

尝试在

父项：悬停
中的操作。有些人喜欢：

.whilelist:hover .whilebilder { 
  display: none;
}

演示
这里是使用JQuery的方法

$('.class1').mouseleave(function () {
    $('#text-wrapper').hide();
});
$('.class1').mouseenter(function () {
    $('#text-wrapper').show();
});

如果有你的尝试或代码，你的问题会更清楚。发布你的html和css代码“我希望我的问题是清楚的”。我也希望如此。消失=与背景相同的颜色，使其不可见。我试过你的代码，它不起作用