将鼠标悬停在不同的背景上时，将鼠标悬停在不同的背景上

我在处理只有一种期望的悬停效果时看到了完成此操作的解决方案，但我希望有四个子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

将鼠标悬停在不同的背景上时，将鼠标悬停在不同的背景上

回答

相关问题