悬停在不同的元素上（仅CSS解决方案）

Question

我在将悬停效果应用于不同的HTML元素时遇到了麻烦，例如更改DIV边框的颜色以及它的父母DIV的背景颜色。

我的HTML代码如下所示：

<div id="time-later">
   <div class="time-arrow"></div>
   <p>later</p>
</div>

匹配的CSS代码：

#time-later {
   height: 35px;
   width: calc(25% - (15px/4));
}

#time-later p {
   display: block;
   width: calc(100% - 14.5px);
   margin-right: 14.5px;
}

#time-later .time-arrow {
   float: right;
   width: 0;
   height: 0;
   border-top: 17.5px solid transparent;
   border-left: 14.5px solid green;
   border-bottom: 17.5px solid transparent;
   z-index: 1;
}

一些造型

#time-later p {
   text-align: center;
   line-height: 35px;
   background-color: green;
}

#time-later p:hover {
   background-color: red;
}

#time-later p:active {
   color: #FFF;
   background-color: gray;
}

当我将鼠标移到＃time-later元素上时，我希望p元素的背景和.arrow元素的边框以相同的颜色着色。

JSFiddle

是否有任何仅支持CSS的解决方案来实现这样的目标？我知道放置图像会更容易，但我正在寻找一个仅限CSS的解决方案。谢谢你的帮助！

Answer 1

将:hover和:active移至父元素，然后按以下方式定位子项：

<强> Example Here

#time-later:hover > p { background-color: red; }
#time-later:hover > .time-arrow { border-left-color: red; }

#time-later:active > p { background-color: gray; color: white; }
#time-later:active > .time-arrow { border-left-color: gray; }

Answer 2

JSBIN

通过修改父伪样式来处理你想要的东西。

的CSS

#time-later:hover p{
   background-color: red;
}
#time-later:hover .time-arrow{
   border-left: 14.5px solid red;
}     
#time-later:active p {
   color: #FFF;
   background-color: gray;
}
#time-later:active .time-arrow{
  border-left: 14.5px solid gray;
}

Answer 3

像这样？ http://jsfiddle.net/z0vm0nm4/1/

  #time-later:hover p{
       background-color: red;
    }
    #time-later:hover .time-arrow {
       border-left: 14.5px solid red;
    }

Answer 4

你可以将鼠标悬停在div上 例如：

div#time-later:hover .time-arrow{
   border-top: 17.5px solid transparent;
   border-left: 14.5px solid background:tan;
   border-bottom: 17.5px solid transparent;
}

div#time-later:hover p{
   background:tan;
}

Answer 5

尝试这个，为我工作：

/* some stylings */

#time-later p {
   text-align: center;
   line-height: 35px;
   background-color: green;
}

#time-later:hover p {
   background-color: red;
}

#time-later:active p {
   color: #FFF;
   background-color: gray;
}

#time-later:hover .time-arrow {
   border-left: 14.5px solid red;
}

#time-later:active .time-arrow {
border-left: 14.5px solid gray;
}

http://jsfiddle.net/h50L9noy/