divでcssのアイコンを1回だけ起動する

Question

3つのアイコンのホバーで色の遷移を設定しました。これらのアイコンは同じdivにあり、divにマウスを置くと、すべてのdivの遷移が開始されます。 divのアイコンにマウスを置くと、そのトランジションだけが開始され、他のトランジションは開始されません。私はそれをする方法を知っていると思ったが、私は間違っていた。

マイコード：

HTML：

<div id="icons"> 
<div id="logoquestion"> 
<a href="" target="_blank"><img src="Images/question-mark.png" style="width: 40px; height: 40px;"></a> 
    </div> 
<div id="logofbcol"> 
    <a href="" target="_blank"><img src="Images/logofacebookcolori.png" style="width: 40px; height: 40px;"></a> 
    </div> 
<div class="logoemailcol"> 
    <a href="" target="_blank"><img src="Images/logoemail.png" style="width: 60px; height: 60px;"></a> 
    </div> 
</div> 

CSS：

#logoemailcol{ 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -webkit-transition: -webkit-filter 500ms linear; 
    -moz-transition: -webkit-filter 500ms linear; 
    -o-transition: -webkit-filter 500ms linear; 
    -ms-transition: -webkit-filter 500ms linear; 
    transition: -webkit-filter 500ms linear; 
} 

#icons:hover > #logoemailcol{ 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -webkit-transition: -webkit-filter 500ms linear; 
    -moz-transition: -webkit-filter 500ms linear; 
    -o-transition: -webkit-filter 500ms linear; 
    -ms-transition: -webkit-filter 500ms linear; 
    transition: -webkit-filter 500ms linear; 
} 

#logofbcol{ 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -webkit-transition: -webkit-filter 500ms linear; 
    -moz-transition: -webkit-filter 500ms linear; 
    -o-transition: -webkit-filter 500ms linear; 
    -ms-transition: -webkit-filter 500ms linear; 
    transition: -webkit-filter 500ms linear; 
} 

#icons:hover > #logofbcol{ 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -webkit-transition: -webkit-filter 500ms linear; 
    -moz-transition: -webkit-filter 500ms linear; 
    -o-transition: -webkit-filter 500ms linear; 
    -ms-transition: -webkit-filter 500ms linear; 
    transition: -webkit-filter 500ms linear; 
} 

#logoquestion{ 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -webkit-transition: -webkit-filter 500ms linear; 
    -moz-transition: -webkit-filter 500ms linear; 
    -o-transition: -webkit-filter 500ms linear; 
    -ms-transition: -webkit-filter 500ms linear; 
    transition: -webkit-filter 500ms linear; 
} 

#icons:hover > #logoquestion{ 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -webkit-transition: -webkit-filter 500ms linear; 
    -moz-transition: -webkit-filter 500ms linear; 
    -o-transition: -webkit-filter 500ms linear; 
    -ms-transition: -webkit-filter 500ms linear; 
    transition: -webkit-filter 500ms linear; 
} 

Answer 1

が

で

#icons:hover > #logofbcol 

を交換してみてください

#logofbcol:hover 

各部門の