デフォルトのロゴを持つ 3 つのセクションがあります...左、中央、右..すべてのセクションにマウスを合わせると、それぞれのロゴで 1 つずつ変化します。
左のセクションにマウスオーバーすると、ロゴが変更されましたが、問題は、左のセクションのロゴをマウスオーバーすると、デフォルトのセクションに変わります(左のセクションがロゴとともに消えたことを意味します)。 .
左セクションのロゴの上にマウスを移動すると、マウス効果がオフになる必要があります。他の2つのセクションにも同じことが適用されます..
HTML :
<div id="container">
<div class="logo">
<img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
</div>
<div class="main" id="left">
<div class="dot1-top">
<img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
</div>
<div class="showhide">
<div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>
</div>
</div>
<div class="main" id="middle">
<div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide2">
<div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
</div>
</div>
</div>
<div class="main" id="right">
<div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide3">
<div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
</div>
</div>
</div>
</div>
そして、これがjsfiddleです