【问题标题】：hover on different elements (CSS only solution)悬停在不同的元素上（仅 CSS 解决方案）
【发布时间】：2014-10-23 09:08:54
【问题描述】：

我在对不同的 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 的解决方案。感谢您的帮助！

【问题讨论】：

标签： html css hover pseudo-element

【解决方案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; }

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

喜欢这样吗？ http://jsfiddle.net/z0vm0nm4/1/

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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/

【讨论】：