將鼠標懸停在不同的背景上時，將鼠標懸停在不同的背景上

我在處理只有一種期望的懸停效果時看到了完成此操作的解決方案，但我希望有四個子div，每個子div更改主父div的背景到一個單獨的圖像。將鼠標懸停在不同的背景上時，將鼠標懸停在不同的背景上

我假設這是不可能的CSS。

<div id="buttonBox"> 
    <div id="schedBox"> 
    <a href="#">Schedule</a> 
    </div> 
    <div id="transBox"> 
    <a href="#">Transformation</a> 
    </div> 
    <div id="destBox"> 
    <a href="#">Destination</a> 
    </div> 
    <div id="inspirBox"> 
    <a href="#">Inspiration</a> 
    </div> 
</div>

另外，我可以讓孩子的div各有不同的背景。懸停一個孩子div會改變所有的孩子div背景到一個單獨的顏色，但我想不出如何有一個懸停在第二個div影響以前的div ..只有後來的兄弟姐妹。

來源

2012-11-25 Nathan S

有其中一個寫着： http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child/45530#45530 和HTTP ：//stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – 3dgoo

很遺憾，CSS中沒有父選擇器。

你將不得不使用JavaScript來實現你想要做的事情。

來源

2012-11-25 22:25:32

雖然實際的父選擇器不可能通過CSS，但您可以使用額外的元素和定位來「破解」它。

你需要的是根據什麼元素被盤旋來改變背景 - 好吧！讓我們添加僞元素（或正常的元素，如果你需要IE瀏覽器支持），並使用絕對定位和積極z-index他們在父母的位置：

#buttonBox { 
    position: relative; 
    z-index: 1; 
} 

#buttonBox > div:before { 
    content: ""; 

    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
}

那些定位元素應該有負面z-index，所以它們將被放置在所有其他內容下，但在父元素的背景上。

這種方式，您可以添加規則像

#schedBox:hover:before { background: lime; } 
#transBox:hover:before { background: red; } 
#destBox:hover:before { background: orange; } 
#inspirBox:hover:before { background: yellow; }

和家長的僞背景會改變懸停！

唯一要知道的是，不應該有父元素和具有背景角色的元素之間具有非靜態位置的元素。

Here is the live example at dabblet

來源

2012-11-28 12:56:16 kizu

是的，這是可能的。試試這個：

#schedBox:hover, #buttonBox{ 
    background: red; 
} 

#schedBox:hover{ 
    background: green; 
}

來源

2012-12-24 23:53:05 prium

將鼠標懸停在不同的背景上時，將鼠標懸停在不同的背景上

回答

相關問題