Question

我希望我的投资组合中的一部分图片能够隐隐约约。然后当鼠标悬停在它们上面时，它们的透明度为100％。

我以为我的css工作正常，但我没有被卡住，因为它似乎只是显示图像微弱但是当悬停时没有任何事情发生。

非常感谢你提前帮助。

我的HTML：

<div class="portfolioimages"><div class="images-responsive">
        <img src="images/portfolio/brand/platinum-logo.jpg" /><img src="images/portfolio/brand/platinum-stationery.jpg" />
        <img src="images/portfolio/brand/speed-trades-stationery.jpg" /><img src="images/portfolio/brand/speed-trades-logo.jpg" />
        <img src="images/portfolio/brand/crumbs-cupcakes-logo.jpg" /><img src="images/portfolio/brand/crumbs-cupcakes-stationery.jpg" />
        <img src="images/portfolio/brand/adam-and-gaskell-stationery.jpg" /><img src="images/portfolio/brand/adam-and-gaskell-logo.jpg" />
        <img src="images/portfolio/brand/es-logo.jpg" /><img src="images/portfolio/brand/es-stationery.jpg" />
        </div></div>

我的CSS：

.images-responsive {
    cursor:pointer;
    opacity:0.7;
    transition:0.5s;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -o-transition:0.5s;
}

.images-responsive: hover {
    opacity:1;
    transition:0.5s;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -o-transition:0.5s;
}

Answer 1

删除hover前面的空格：

.images-responsive: hover {

你需要这个，没有空格：

.images-responsive:hover {

Here's a kitten to demonstrate

Answer 2

你没有将CSS应用于图像，只是div。需要

.images-responsive img {
cursor:pointer;
opacity:0.7;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;

}

.images-responsive img: hover {
opacity:1;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;

}

过渡淡入图像不起作用

2 个答案: