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

Posted 2023-05-08

【中文标题】另一个类 img:hover 上的 CSS 过渡

【英文标题】：CSS Transition on another class img:hover

【发布时间】：2015-12-14 06:06:10

【问题描述】：

我有一个带有这个 :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" />
            </a>
        </li>
    </ul>

GIF： https://gyazo.com/fe388835229cf2492a0188f2d29a12df

当我将鼠标悬停在 img 时，我想同时查看它们。

【问题讨论】：

你能发布你的相关 HTML 吗？

哦，是的，忘记了，添加了！

为什么不把两个悬停相关的代码都放到你的 .viewmore:hover - css 中？

我不知道在 css 中会是什么样子，在不同的类之间有一个“，”？用 + 或 ~ 也许？而且我不想要黑白滤镜的过渡。

【参考方案1】：

诀窍是在父元素上拥有: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"  />
    <img src="https://via.placeholder.com/50x50" class="button" >
</a>

【讨论】：

谢谢！现在它完全适用于我想要的所有网格图像。但是现在我还有其他一些奇怪的故障，所以现在尝试修复这些故障：p 如果我不能生病，请留下另一个回复。