使用 CSS 更改悬停时的父子 div答案

【问题标题】：Change parent AND child div on hover with CSS使用 CSS 更改悬停时的父子 div
【发布时间】：2014-08-25 18:10:16
【问题描述】：

一些代码...

<a href="#">
<div class="col-md-4">
<img src="image.jpg">
<div class="text">TEXT</div>
</div>
</a>

还有一些 CSS 开始...

.col-md-4 {
background color: #000;
}
.text {
color: #fff;
}

我想在翻转时更改 col-md-4 IMAGE 不透明度。同时，我还需要 TEXT 在翻转时改变颜色。

我可以让一个或另一个工作 - 文本或 div，但不能同时使用。

知道在翻转时我需要做些什么来定位两者吗？

【问题讨论】：

将悬停移动到锚点而不是 div。请注意，更改 div 的不透明度也会更改文本的不透明度。
有什么方法可以独立定位两者？例如 - 当父 div 翻转时 - 将图像不透明度更改为 .6 并更改文本颜色但保留文本的完全不透明度？
你能做一个jsfiddle吗？ jsfiddle.net 顺便说一句，听起来您想更改图像的不透明度，而不是父级。如果您更改父 div (col-md-4)，您将影响子元素的不透明度。您应该查看获取图像的悬停，然后使用 ~ 选择器 w3schools.com/cssref/css_selectors.asp 获取其直接兄弟
要在另一个元素的悬停上更改一个，您需要使用 jquery，因为您只能更改直接下一个兄弟的属性，而不是前一个

【解决方案1】：

根据您的 cmets，我相信这就是您所追求的。

   .col-md-4:hover img {
    opacity:0.6
    }

这将仅在 div 悬停时更改图像的不透明度。

对于文字变化

   .col-md-4:hover .text {
    color: /* other color */
    }

【讨论】：