javascript - jQuery hover no longer working after executing script -


here's setup have:

http://i.stack.imgur.com/varmv.png

if click on image b, switch image , image b. if click image e, switch image b , image e, , on.

however, want add hover effects whenever hover on image, darken image. have working when click on (for example) image b, switch image b , image image b dark , hover effects not work on image anymore.

i'm using wordpress:

 <div id="content" class="site-content" role="main">         <div class="content_wrapper">             <div class="content_featured" style="float:left; "></div>             <?php if ( have_posts() ) : ?>             <?php                 $i = 1;             ?>             <div class="content_children" style="float:right">                 <div class="content_left" style="float:left">                 <?php while( have_posts() ) : the_post(); ?>                 <?php                     static $count = 0;                     if( $count == 5 ) { break; }                      else {                         if( $i == 1 ) {                             ?><span><span class="main active"><a href="javascript:void(0);"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full');?></div></a></span></span><?php                         } else {                             ?><span class="child nonactive"><a href="javascript:void(0);"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full'); ?></div></a></span><?php                         }                         $i++;                         $count++;                     }                 ?>                 <?php endwhile; ?>                 </div>                 <div class="content_right" style="float:right;"></div>             </div>              <?php twentythirteen_paging_nav(); ?>          <?php else : ?>             <?php get_template_part( 'content', 'none' ); ?>         <?php endif; ?>         </div>     </div><!-- #content --> 

here's script far:

 jquery(document).ready(function() { divide_content($); cycle_images($); darken_images($);  var main = jquery(".content_left span:first").html(); jquery(".content_left span:first").empty(); jquery(".content_featured").append(main); });  function cycle_images($) { $(".nonactive").click(function() {     var = $(this).html();     var b = $(".active").html();     //alert(a+"\n\n"+b);     $(this).empty();     $(".active").empty();     $(this).append(b);     $(".active").append(a); }); }  function divide_content($) { var size = $(".content_left > span").size(); $(".content_left > span").each(function(index) {     if(index >= size / 2) {         $(this).appendto(".content_right");     } }); }  function darken_images($) { $(".nonactive img").hover(function() {     $(this).fadeto(500, 0.5); }, function() {     $(this).fadeto(500, 1); });  $(".content_featured").hover(function() {     $(".active img").fadeto(500, 0.5);     //alert("qwe"); }, function() {     $(".active img").fadeto(500, 1); }); } 

ps know wrong title don't know how else state it.

edit: here's best fiddle. link


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -