Question

每当你将照片贴在我的照片上时，我都会对其进行渐晕效果，但是当我将鼠标悬停在照片顶部的按钮上时，小插图就消失了。我如何使这项工作？

这是我使用的渐晕代码：

.shadow {
    position:relative;
    display:block;
    -webkit-transition:all.5s linear;
}

.shadow img {
    display:block;
    -webkit-transition:all.5s linear;
}

.shadow::before {
    -webkit-box-shadow:inset 0 0 0px #000;
    -moz-box-shadow:inset 0 0 0px #000;
    box-shadow:inset 0 0 0px #000;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:"";
    -webkit-transition:all.5s ease-out;
    -moz-transition:all.5s ease-out;
    transition:all.5s ease-out;
}

.shadow:hover::before {
    -webkit-box-shadow:inset 0 0 250px #000;
    -moz-box-shadow:inset 0 0 250px #000;
    box-shadow:inset 0 0 250px #000;
    -webkit-transition:all.8s ease-in;
    -moz-transition:all.8s ease-in;
    transition:all.8s ease-in;
}

这是我的 Fiddle

请帮忙。

Answer 1

纯css无法通过悬停子元素来设置父元素的样式。

请参阅How to style the parent element when hovering a child element?

或者您可以更改您的html布局以使其正常工作。

Answer 2

在图片前放置按钮，然后使用css选择器.button:hover+.photo .shadow::before和.button:hover+.button+.photo .shadow::before

新HTML

<div class="entry">
    <div class="button">
        <div class="permalink"><a href=""><img src="http://static.tumblr.com/27apcde/7yjmrnwpi/pl.png"></a>
        </div>
    </div>
    <div class="button">
        <div class="reblog"><a href=""><img src="http://static.tumblr.com/27apcde/xpBmrnwv5/rb.png"></a>

        </div>
    </div>
    <div class="photo">
        <center>
            <div class="shadow">
                <img src="https://40.media.tumblr.com/fdd926af3420367b603b70dc3fed196e/tumblr_mxrdbq86PY1r9a23uo1_500.jpg" />
            </div>
        </center>
    </div>
</div>

新CSS

.shadow:hover::before,
.button:hover+.photo .shadow::before,
.button:hover+.button+.photo .shadow::before{
    -webkit-box-shadow:inset 0 0 250px #000;
    -moz-box-shadow:inset 0 0 250px #000;
    box-shadow:inset 0 0 250px #000;
    -webkit-transition:all.8s ease-in;
    -moz-transition:all.8s ease-in;
    transition:all.8s ease-in;
}
 .button {
    position:absolute;
    background:#;
    left:21px;
    bottom:33px;
    z-index:10;
}

DEMO

Answer 3

尝试在阴影中放置按钮

<div class="entry">
    <div class="photo">
        <center>
            <div class="shadow">
                <img src="https://40.media.tumblr.com/fdd926af3420367b603b70dc3fed196e/tumblr_mxrdbq86PY1r9a23uo1_500.jpg" />
                 <div class="button">
        <div class="reblog"><a href=""><img src="http://static.tumblr.com/27apcde/xpBmrnwv5/rb.png"></a>

        </div>
    </div>
    <div class="button">
        <div class="permalink"><a href=""><img src="http://static.tumblr.com/27apcde/7yjmrnwpi/pl.png"></a>
        </div>
    </div>
            </div>
        </center>
    </div>

</div>

Answer 4

您的HTML结构和CSS也应该有一些变化。按钮应该在.shadow元素内，因为你想继续悬停在按钮上同时悬停在按钮上。有关HTML和CSS的更新，请按照我更新的(http://jsfiddle.net/smvora_4u/pr85jeat/2/)

进行操作

当我将鼠标悬停在其上方的div上时，Div的悬停效果不起作用

4 个答案: