另一个类上的CSS过渡img：hover

genghisdong 发表于 Dev

成吉思洞

我有一个带有：hover效果的类，它可以提供图像颜色。而且我有一个单独的类，它在：hover上显示“ +”，但仅当我将其悬停时才显示。我想在一个img：hover上同时使用：hover效果：

img：hover效果的代码。（使用黑白滤镜）。

.og-grid li > a,
.og-grid li > a img {
    border: none;
    outline: none;
    display: block;
    position: relative;
    -webkit-filter: grayscale(100%); 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}

.og-grid li > a,
.og-grid li > a img:hover{
    -webkit-filter: grayscale(0%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

+悬停效果的代码。

.viewmore {
    margin-left: 350px;
    opacity: 0;
    position: absolute;
    z-index: 100;
}

.viewmore:hover{
    opacity: 100;
    margin-top: 45px;
    transition: all ease 0.9s;
}

HTML（希望将其应用于网格中的所有img）：viewmore.png是“ +” img，当我将其悬停时会淡入。

<img src="img/viewmore.png" class="viewmore">
    <ul id="og-grid" class="og-grid">             
        <li>  
            <a href="" data-largesrc="img/work/sunmoon.jpg" data-title="MoonSun Shades" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
                <img src="img/work/sunmoon2.jpg" alt="img01"/>
            </a>
        </li>
    </ul>

GIF： https ：//gyazo.com/fe388835229cf2492a0188f2d29a12df

悬停img时，我想同时使用它们。

麦可

诀窍是:hover在父元素上具有伪类。当您将鼠标悬停在父母身上时，您可以移动其中一个孩子。

我对您的代码进行了一些重组，并引入了更多的语义类名称：

.view-more img.main {
    transition: all 1s ease;
    display: block;
    -webkit-filter: grayscale(100%); 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}

.view-more:hover img.main {
    -webkit-filter: grayscale(0%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.view-more {
    position: relative; /* needed for child absolute positioning */
    display: inline-block;
    overflow: hidden;
}
.view-more .button {
    right: 10px;
    top: -80px;
    position: absolute;
    z-index: 100;
    opacity: 0;
    transition: all 1s ease;
    border: 1px red solid;
}
.view-more:hover .button {
    top: 0;
    opacity: 1;
}

<a href="#" class="view-more">
    <img class="main" src="https://via.placeholder.com/350x150" alt="img01" width="200"/>
    <img src="https://via.placeholder.com/50x50" class="button" width="50">
</a>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。