Question

我希望获得与此网站相同的悬停效果：http://educade.org/

但是，我遇到了一些问题。例如，当我尝试将鼠标悬停在父div上时，之前设置的子div的背景颜色不会改变。只有div的“空白”空格才会突出显示。

另外，为什么.box div不会填充.videoclip div的剩余高度？我试图将它的高度设置为100％，但它溢出得非常糟糕。

父div

.videoclip{
   width:100%;
   height: 300px;
   max-height:300px;
   background: #FFFFFF;
   border-radius: 3px;
   border: solid 1px #e3e3e3;
}

子div的示例（bg颜色）

.videoclip .box{
   background:#FFFFFF;
   font-size: 1.1em;
   display:block;
   padding:10px 10px 10px 10px;
   margin-bottom:10px;
   overflow:hidden;
}

悬停

.videoclip:hover{
   background:#CCFF11 !important;
}

以下是我的完整代码的链接：http://codepen.io/anon/pen/XjvrEy

用一行代码可以获得相同的效果吗？（将悬停应用于父级？）

请不要在此问题上发布JS解决方案

Answer 1

您需要在hover事件后添加子元素：

.videoclip:hover .box
{
      background: #CCFF11;
}

你不需要important

Answer 2

只需从.videoclip.box

中删除背景

.videoclip .box{
background:#FFFFFF;
font-size: 1.1em;
display:block;
padding:10px 10px 10px 10px;
margin-bottom:10px;
overflow:hidden;
}

或添加此内容：

.videoclip:hover .box{
background:#CCFF11 !important;
}

那些！重要性不再是必要的，但也许你将来还有其他需要它的代码。

对于剩下的空间，请检查你的底部。它们是10px和20px，这是剩下的空间。

悬停在父母身上而不是覆盖儿童背景

2 个答案: