css hover시 text가 없을때는 작동이 안됩니다.

<div style="background: rgb(51, 189, 239); border-radius: 6px; color: rgb(0, 0, 0);  id="id값">   <div>     <span class="default_button" style="color: rgb(255, 0, 0);"></span> <!-- span 안에 text가 존재하면 hover시 색상 변경되지만 지금과같이 text가 존재하지 않으면 정상적으로 작동이 안됩니다. 방법이 있을까요? -->   </div> <style id="builder_button_css">#id값 div:hover,#id값 div.active {background:#1eba35; color: #000000; border-radius:6px; transition:background-color .5s ease;}</style> </div>