ホバーで機能するようにブートストラップタブを変更し、コンテンツタブを正しく非表示にするためにいくつかの変更を加えました。
動的なポップアップ/フライアウトレイヤーとして機能させたい。
ここで問題となるのは、メニューにカーソルを合わせた後にコンテンツにカーソルを合わせないと、正しく機能しないことです。それぞれのタブまたはコンテンツ自体にカーソルを合わせたときに表示されるようにします。元のスクリプトをすばやく変更した場合の問題は、タブを左(1番目のメニュー項目)または右(3番目のメニュー項目)に置いたときにコンテンツが表示されることです。
これは、次のjsFiddleに示されています。
シンプルでクリーンなソリューションをいただければ幸いです。