Как некая иллюстрация ранее сказанного...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.icons,
.icon {
border: 1px solid;
}
.icon {
width: 20px;
height: 20px;
}
.list {
display: none;
}
.on .list {
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
const o = document.querySelector('.icons')
o.addEventListener('mouseover', e => {
if (!e.target.classList.contains('icon')) return
if (!o.classList.contains('on')) o.classList.add('on')
})
o.addEventListener('mouseout', e => {
const c = e.target.classList
if (c.contains('icon')) return
if (c.contains('list')) return
if (o.classList.contains('on')) o.classList.remove('on')
})
})
</script>
</head>
<body>
<div class="icons">
<div class="icon"><img src='https://javascript.ru/forum/images/smilies/smile.gif' /></div>
<div class="list opacity" id = "list_id">....</div>
</div>
</body>
</html>