knockout.js - Settings icon functionality with knockoutJS -

i working on sample have settings image named "lnksetting" , upon clicking it, showing div named "settingsdiv" few list items (1. mute 2. me 3. more options).

now trying figure out way hide "settingsdiv" div when moving focus out of lnksetting

i added event mouseout databind of knockoutjs , made changes set observable true/false ( observable set settingsdiv )

but if this, when trying select option settingsdiv, moving focus out of lnksetting, setting visibility false settingsdiv.

can suggest idea on can achieve hiding of settingsdiv when mouseout of lnksetting , allow selection of options settingsdiv

below pseudo code using this.

<img id="lnksetting"  alt="setting" src="settings.png" data-bind="click: chatsettingclick , event: { mouseout: chatsettinghidehover } "> 

the div showing on clicking lnksetting

 <!-- ko if: showchatsettingoptions --> <div class="settingsdiv">             <ul>                     <li>mute</li>            <li>about me</li>          <li>more options</li>     </ul>     </div> <!-- /ko --> 

and in chatsettingclick, setting showchatsettingoptions true/false below

self.chatsettingclick= function () { self.showchatsettingoptions(!self.showchatsettingoptions()); } 

as per @tomalak's comments, stopped concentrating on mouse moments impossible use on touch screens.