<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <style> .yellow{ background: yellow; } </style> </head> <body> <div> <div class="yellow" data-bind="event: { mouseover: displayDetails, mouseout: hideDetails }"> Mouse over me </div> <div data-bind="visible: messageDetails"> Details </div> </div> <script type="text/javascript"> var MessageModel = { messageDetails: ko.observable(false), displayDetails: function() { this.messageDetails(true); }, hideDetails: function() { this.messageDetails(false); } }; ko.applyBindings(MessageModel); </script> </body> </html>
Output...
