当你将鼠标悬停在div上时,如何淡化图像？

Question

我有一个大的div,里面有一个小图像.当我将鼠标悬停在div上时,我想让图像褪色,即使鼠标没有直接在图像本身上方.

div比图像大得多,所以我不会在图像周围添加透明度或更改图像大小或类似的东西.

当鼠标悬停在div上时,我只想让它消失.

这是我到目前为止的代码,但它没有用处:

<div id="left">
    <img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>

CSS

#left {
    background-color: #f0f0ee;
    float: left;
    width: 50%;
    min-height: 100%;
}

#logoLeft {
    float: right;
    margin-top: 2.5em;
}

Answer 1

我建议:

#left:hover #logoLeft {
    opacity: 0.4;
}

如果你想逐渐褪色:

#logoLeft {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#left:hover #logoLeft {
    opacity: 0.4;
    transition: opacity 0.3s ease-in-out;
}