Hovercard not displaying in knockoutJS with-binding <p>I got this hover card and I want to display it inside a sub-menu. It works int the header, but somehow the hover effect does not kick in when inside the sub-menu "with:$root.chosenMenu"-bindings.</p> <p>This is my code:</p> <p>HTML:</p> <pre><code>&lt;div&gt; &lt;span class="previewCard"&gt; &lt;label class="hovercardName" data-bind="text: displayName"&gt;&lt;/label&gt; &lt;span class="hovercardDetails"&gt; &lt;span data-bind="text: miniBio"&gt;&lt;/span&gt;.&lt;br/&gt; &lt;a data-bind="attr: { href: webpage, title: webpage }, text: webpage"&gt;My blog&lt;/a&gt; &lt;/span&gt; &lt;/span&gt; &lt;br/&gt;&lt;br/&gt; &lt;div class="wysClear wysLeft buttonRow"&gt; &lt;a href="#pid1" data-bind="click: function(){$root.chosenMenu('a');return false;}"&gt;Panel A&lt;/a&gt; &lt;a href="#pid2" data-bind="click: function(){$root.chosenMenu('b');return false;}"&gt;Panel B&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr/&gt; &lt;div data-bind="with: $root.chosenMenu"&gt; &lt;div id="pid1" data-bind="visible: $root.chosenMenu() === 'a'"&gt; panel A: &lt;br/&gt;&lt;br/&gt; &lt;span class="previewCard"&gt; &lt;label class="hovercardName" data-bind="text: $root.displayName"&gt;&lt;/label&gt; &lt;span class="hovercardDetails"&gt; &lt;span data-bind="text: $root.miniBio"&gt;&lt;/span&gt;.&lt;br/&gt; &lt;a data-bind="attr: { href: $root.webpage, title: $root.webpage }, text: $root.webpage"&gt;My blog&lt;/a&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;div id="pid2" data-bind="visible: $root.chosenMenu() === 'b'"&gt; panel B: &lt;br/&gt;&lt;br/&gt; &lt;span class="previewCard"&gt; &lt;label class="hovercardName" data-bind="text: $root.displayName"&gt;&lt;/label&gt; &lt;span class="hovercardDetails"&gt; &lt;span data-bind="text: $root.miniBio"&gt;&lt;/span&gt;.&lt;br/&gt; &lt;a data-bind="attr: { href: $root.webpage, title: $root.webpage }, text: $root.webpage"&gt;My blog&lt;/a&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Javascript:</p> <pre><code>viewModel = function(){ var self = this; self.chosenMenu = ko.observable(); self.displayName = ko.observable("Asle G"); self.miniBio = ko.observable("Everywhere we go - there you are!"); self.webpage = ko.observable("http://blog.a-changing.com") }; ko.applyBindings( new viewModel() ); // hovercard $(".previewCard").hover(function() { $(this).find(".hovercardDetails").stop(true, true).fadeIn(); }, function() { $(this).find(".hovercardDetails").stop(true, true).fadeOut(); }); </code></pre> <p>CSS:</p> <pre><code>.previewCard { position:relative; } .hovercardName { font-weight:bold; position:relative; z-index:100; /*greater than details, to still appear in card*/ } .hovercardDetails { background:#fff ; border:solid 1px #ddd; position:absolute ; width:300px; left:-10px; top:-10px; z-index:50; /*less than name*/ padding:2em 10px 10px; /*leave enough padding on top for the name*/ display:none; } </code></pre> <p>Fiddle: <a href="http://jsfiddle.net/AsleG/jb6b61oh/" rel="nofollow">http://jsfiddle.net/AsleG/jb6b61oh/</a></p>