css - CSS过渡导致错误

Question

我对鼠标悬停有各种过渡效果，例如更改图像不透明度。但是，当鼠标移出项目时，我希望平滑过渡，因此我将过渡代码添加到正常的#div以及##div：hover，但这会导致它在页面加载时“过渡”一种相当难看的方式（刷新时不起作用，仅在页面加载的第一个实例上）并且想知道是否有等效于 javascript 的 mouseout 功能，以便在页面加载时不会发生转换。

下面是一些 CSS 的示例：

#main_categories_item_image img {
    width: 64px;
    height: 64px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;    
    box-shadow: #000 0em 0em 0em;
}
#main_categories_item:hover 
#main_categories_item_image img {
    opacity: 0.7;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

我正在网站 www.ultimate-punch.com 上工作

非常感谢