Question

在CSS中我想告诉浏览器使用相同的div类来降低我所有图像的不透明度，除了我正在盘旋的那个。我知道我可以这样做：

<div class="parent">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

<style>
    .container {
        transition: opacity .3;
    }

    .parent:hover > .container:not(:hover) {
        opacity: .3;
    }
</style>

但是，我正在使用引导网站，并将照片放在col-md-2s中。因此，我的.thumbnail类的直接父级只会使该列中的其他图像在悬停时变得不透明。如果有人知道如何保留它，以便当我将鼠标悬停在一个上时，该类的所有其他图像都会变得不透明，请告诉。

<div id="parent">
    <div class="col-md-6">
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
    </div>
    <div class="col-md-6">
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
        <div class="img-container"></div>
    </div>
</div>

.img-container {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;

    background: red;
    width: 50px;
    height: 50px;
    margin: 5px;
    display: inline-block;
}

.col-md-6:hover > .img-container:not(:hover) {
    opacity: 0.3;
}

http://jsfiddle.net/bZG6T/35/

Answer 1

您只需将.col-md-6:hover更改为包含所有行的元素#parent：

#parent:hover .img-container:not(:hover) {
    opacity: 0.3;
}

Updated fiddle

或者，如果您希望将后代选择器保留在原位：

#parent:hover > .col-md-6 > .img-container:not(:hover) {
    opacity: 0.3;
}

除了一个Cols

1 个答案: