當鼠標懸停在父div上時，更改子div的背景圖像

我在另一個div內有背景圖像的div，我試圖實現的是當有人在任何地方懸停時更改該子div的背景圖像在整個父div上。當鼠標懸停在父div上時，更改子div的背景圖像

我該怎麼做到這一點？

的HTML是這樣的：

<div class="parent_div"> 
<div class="child_div"> 
</div> 
</div>

那孩子div的背景圖片是：

.child_div{ 
    background-image: url("image.jpg"); 
}

我想：

.child_div:hover{ 
    background-image: url("image-new.jpg"); 
}

但是，只有當改變的背景它是懸停在子div上，因爲父div有一些額外的填充，我想包括，它不工作:(

來源

2015-01-12 user1227914

這裏有一個可運行的代碼片段，顯示你的CSS Descendant選擇將如何工作：

.parent_div{ 
 
    height:400px; 
 
    width:100%; 
 
    background:red; 
 
} 
 

 
.child_div { 
 
    height:200px; 
 
    width:100%; 
 
    background-image: url(http://placekitten.com/g/200/200); /*initial*/ 
 
} 
 
.parent_div:hover .child_div{ 
 
    background-image: url(http://placekitten.com/g/200/400); /*when parent is hovered*/ 
 
}

<div class="parent_div"> 
 
    <div class="child_div"> 
 
    </div> 
 
</div>

它使用CSS選擇：

.parent_div:hover .child_div{ 
    background:... 
}

當父懸停（紅色區域中片段），這意味着，造型添加到類child_div作爲..

這是因爲它使用Descendant選擇器來選擇具有徘徊.parent_div元素的類.child_div。

來源

2015-01-12 14:49:39 jbutler483

我真的愛從d /選民聽的，其實。 – jbutler483

工作很好，謝謝:) – user1227914

應該

.parent_div:hover .child_div{ 
    background-image: url("image-new.jpg"); 
}

基本上，它的意思是：當.parent_div懸停，.child_div背景將成爲新的圖像

來源

2015-01-12 14:45:00 pumpkinzzz

你寫子元素的風格，但你需要做的它的母公司：

.parent_div .child_div{ 
    background-image: url('image.jpg'); 
} 

.parent_div:hover .child_div { 
    background-image: url('image-new.jpg'); 
}

來源

2015-01-12 14:46:44 Ragnar

-1

（其它CSS選擇器可以在W3C spec中找到）當你標記與jQuery你的問題，你可以試試這個：

$(document).ready(function(){ 

    $('.parent_div').hover(function(){ 
    $('.child_div').css('background-image','url(urImg.jpg)'); 
    }); 


});

來源

2015-01-12 14:52:58

試試這個CSS：

.parent { 
    width: 150px; 
    height: 150px; 
} 

.parent img.child { 
    width: auto; /* or 100% */ 
    height: auto; /* or 100% */ 
    background-image: url('old-bkg.png'); 
} 

.parent img.child:hover{ 
    background-image: url('new-bkg.png'); 
}

來源

2015-01-12 14:53:12

.parent_div{ 
    width: 200px; 
    height: 200px; 
    background: blue; 
} 

.parent_div:hover .child_div{ 
    background: red; 
} 

.child_div{ 
    width: 200px; 
    height: 100px; 
}

例的jsfiddle這裏：

http://jsfiddle.net/9uu9j220/1/

來源

2015-01-12 14:55:56 Rupert

.child_div{ 
    background-image: url("image.jpg"); 
} 
.parent_div:hover .child_div{ 
    background-image: url("new_hovered_image.jpg"); 
}

你可以看到更多有用的選擇here

來源

2015-01-12 15:00:16 drymisty

當鼠標懸停在父div上時，更改子div的背景圖像

回答

相關問題