I'm trying to make a div \[code\]lolcake\[/code\] appear in another \[code\]panel_toggle1\[/code\] div either:
- when mouse hovers over another div \[code\]panel_toggle1\[/code\]
- or toggles on and off each click on the \[code\]panel_toggle1\[/code\] click
http://jsfiddle.net/Fa7Ct/ hover works fine, but when I click on the \[code\]panel_toggle1\[/code\] and back,
the hover stops working. Why is that?[EDITED] script (NOTE: some code is removed from this script to make it easier to read - and yes the problem still occurs):\[code\]$(document).ready(function () { var toggle_height1 = false; $("#panel_toggle1").click(function () { toggle_height1 = !toggle_height1; if (toggle_height1 == true) { $('.lolcake').css("display", "block"); } else { $('.lolcake').css("display", "none"); } });});\[/code\]working CSS:\[code\].lolcake{ display: none;}#panel_toggle1:hover .lolcake{ display: block;}\[/code\](if needed) aspx\[code\]<!-- GAME1 PANEL TOGGLE --> <div id="panel_toggle1"> <div class="lolcake" style="position:absolute">text</div><img src="http://stackoverflow.com/questions/15727191/images/image.png" alt=""/> </div>\[/code\]I've used other functions like \[code\]toggle()\[/code\] and \[code\]show()\[/code\] \[code\]hide()\[/code\], but all have the same effect.
