I have several "widgets" displayed on a dashboard. When a user hovers over each widget, a "footer" band is revealed in which there are icons to represent options such as "refresh", "settings", "bar chart", "line chart", etc. The hiding and showing of this footer region of each widget is done with CSS.

 

I currently use $('.widget').on('click', ...) to wire up the click events to each of the options in the footer and it works. My question is, can this be done more "efficiently" or "better"? I was thinking/hoping that I could use the mouseover event itself to somehow wire up the click events and release them on mouseout. I thought that this could save some time/resources by not having to wire up all options in each footer of each widget on loading the page and have them done only when the user hovers over the widgets. If so, how do I go about doing this?

 

TIA.