Question

我在库中悬停悬停有问题（html + css）。我找不到解决方案。任何人都可以帮我解决这个问题吗？

HTML:
 <div id="gallery">
            <div class="col-sm-6 photo-1">
                <div class="transparent-gallery">
                    <h3>Photo Caption</h3>
                    <p>Donec sodales semper porttitor.</p>
                </div>
            </div>
</div>

CSS: 
            #gallery .photo-1{
            background-image:url(http://img2.wikia.nocookie.net/__cb20130326013809/camp-dublin-roleplay/images/e/ec/Camden-town.jpg);
            background-size: cover;
            height:300px;
        }

        .transparent-gallery{
            background: rgba(36, 43, 46, 0.8);
            background-size: cover;
            height:300px;
            width:100%;
            position:absolute;
            text-align: center;
        }

        .transparent-gallery h3, .transparent-gallery p{
            visibility:hidden;
        }

        .transparent-gallery:hover h3, .transparent-gallery:hover p{
            visibility:inherit;
        }

        .transparent-gallery:hover{
            background: rgba(36, 43, 46, 0.95);
            height:110px;
            top:200px;
        }

我是初学者，这段代码肯定会更好......

Answer 1

这些属性应该像这样设置

#gallery:hover .transparent-gallery h3, #gallery:hover .transparent-gallery p{
    visibility:inherit;
}

#gallery:hover .transparent-gallery{
    background: rgba(36, 43, 46, 0.95);
    height:110px;
    top:200px;
}

<强> Example here

这样，基本上我们告诉代码执行此操作：

何时 #gallery:hover 显示此=＆gt; .transparent-gallery

闪烁在画廊中徘徊

1 个答案: