CSS div元素使更大的懸停區域

我有一個div元素寬度100px和高度100px。在裏面我有另一個元素寬度100px和高度80px的邊框，我讓懸停消失，但我需要它消失在父元素懸停，所以也在20px下面。我希望我的問題是清楚的^^CSS div元素使更大的懸停區域

父DIV：

.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;  
}

來源

2013-10-31 Matthias Müller

你的問題會很多更清楚，如果它有你的企圖或代碼.. –

發表您的HTML和CSS代碼 – Sudheer

_「我希望我的問題是明確的」 _。我也希望那樣。 – j08691

嘗試在parent:hover的動作。有些人喜歡：

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

演示http://jsfiddle.net/ghpDb/3/

來源

2013-10-31 20:29:38 DaniP

消失=與背景使其不可見相同的顏色。我試過你的代碼不工作 –

@MatthiasMüller查看本演示http://jsfiddle.net/ghpDb/3/ – DaniP

感謝它的作品:)我嘗試了錯誤的方式之前 –

這裏是jQuery來做到這一點。

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

來源

2013-10-31 20:30:56 Damon

CSS div元素使更大的懸停區域

回答

相關問題