Question

我有三张图片作为标签。每张图片都有一个半透明的橙色覆盖图。当您将鼠标悬停在它上面时，橙色不透明度会变暗。单击图像时，活动状态应与悬停状态相同。

所以我这样做了：

.overlay:hover:after, .job-seekers-nav li.active {
opacity: .8!important;
transition: 1s ease;
}

但是当我运行我的代码时，我能够执行悬停效果，但是当我点击某个图像时，它会加载正确的内容，一旦我将鼠标悬停在图像上，图像将恢复为原始图像半橙色而不是较暗的橙色。

HTML

<div class="row main-container job-seekers-nav">
        <!--job seekers tab-->
        <ul>
            <li>
                <div class="col-sm-4">
                    <a data-toggle="tab" href="#light-industrial">
                        <div class="overlay border-bottom-yellow"> 
                            <img src="img/light-industrial.jpg" class="img-responsive center-images">
                        </div>
                    </a>
                </div>
            </li>
            <li>
                <div class="col-sm-4">
                    <a data-toggle="tab" href="#general-warehousing">
                        <div class="overlay border-bottom-yellow"> 
                            <img src="img/general-warehousing.jpg" class="img-responsive center-images">
                        </div>
                    </a>
                </div>
            </li>
            <li>
                <div class="col-sm-4">
                    <a data-toggle="tab" href="#administrative-work">
                        <div class="overlay border-bottom-yellow"> 
                            <img src="img/administrative-work.jpg" class="img-responsive center-images"/>
                        </div>
                    </a>
                </div>
            </li>
        </ul>
        <!--end of job seekers tab-->
    </div>

CSS

.job-seekers-nav ul {
padding: 0;
}
.job-seekers-nav li {
    display: inline;
    list-style: none;
    }

.overlay {
    display:inline-block;
    position: relative;
}

.overlay:after {
    content:'';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: #f4511e;
    opacity: 0.5;
}
.overlay:hover:after, .job-seekers-nav li.active {
    opacity: .8!important;
    transition: 1s ease;
}

.border-bottom-yellow {
    border-bottom: 30px solid #fce565;
}

Answer 1

试试这个：

.overlay:hover:after, 
.job-seekers-nav li.active .overlay:after
{
    opacity: .8!important;
    transition: 1s ease;
}

使悬停和活动选择器相同

1 个答案: