jQuery mouseover on text and padding area not working -


i have wordpress blog, in loop, layout text (title. date, summary) on left , image float right (padding 50% left), want make 50% space on left , elements on (title. date, summary) make hoverable (on hovering left area make text color change black , background #ff7f00;).

css of post-ut

  .post-ut {     display:block;     color:#999999;      z-index:2;     float:left;     letter-spacing:1px;     font-size:13px;     position: relative;     width:282px; } .post-ut {     max-width:74px;     min-width:74px;     text-decoration:none;     color: #999999;     display:inline-block;     z-index:1; } 

here idea of jquery code using thats not working

    $('div.post-ut').mouseover(function() {       $('.entry-summary p', $(this).parent())        .css("color","black")        .css("background","#ff7f00");  });  $('div.post-ut').mouseout(function() {      $('.entry-summary p', $(this).parent())        .css("color","white")        .css("background","black");  }); 

the php code wordress post loop is

<h1 class="thumb" style="z-index:2; width:252px;">                     <a style="padding:15px 15px 5px 15px; width:252px; font-size:30px; font-weight:100; " href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'permalink %s', ut_theme_name ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>                  </h1>                 <br/>                  <div class="post-ut" style="margin-top:-43px;">              &nbsp;&nbsp;&nbsp;&nbsp;<?php the_time('d. m. y, g:i') ?> | <?php lambda_posted_in(); ?>                                             </div> <!-- post -->              </header>          <?php               echo '<div class="thumb" style="width:282px; padding-left:282px; margin-top:-114px; margin-bottom:20px; "><div class="post-image"><div class="overflow-hidden imagepost">';             echo '<img class="wp-post-image"  style="display:inline-block; width:282px; height:272px;" src="'.$url.'" />';             echo '<a title="'.get_the_title().'" href="'.get_permalink().'"><div class="hover-overlay"><span class="circle-hover"><img src="'.get_template_directory_uri().'/images/circle-hover.png" alt="'.__('link icon',ut_theme_initial).'" /></span></div></a>';             echo '</div></div></div>';          endif; ?>          <div class="entry-content clearfix">            <div class="entry-summary">              <?php if ( is_archive() || is_search() || get_option_tree('excerpt_blog') == 'yes') :                   the_excerpt();               else :           ?>            <?php endif; ?>             </div><!-- .entry-summary -->          </div><!-- .entry-content --> 

i using jquery hover image, , thats working not code posted above. working code is

$('div.thumb').mouseover(function() { $('a', $(this).parent())    .css("color","black")    .css("background","#ff7f00");  $('.post-ut', $(this).parent())    .css("color","black")    .css("background","#ff7f00")    .find('a').css("color","black");  $('.entry-summary p', $(this).parent())    .css("color","black")    .css("background","#ff7f00"); 

});

$('div.thumb').mouseout(function() {      $('a', $(this).parent())        .css("color","white")        .css("background","black");      $('.post-ut', $(this).parent())        .css("color","white")        .css("background","black")        .find('a').css("color","white");      $('.entry-summary p', $(this).parent())        .css("color","white")        .css("background","black");  }); 

update: after removing position:relative; class post-ut, hovering works text not visible

remove p code , check.

$('div.post-ut').mouseover(function() {  $('.entry-summary', $(this).parent())    .css("color","black")    .css("background","#ff7f00");  });  $('div.post-ut').mouseout(function() {  $('.entry-summary', $(this).parent())    .css("color","white")    .css("background","black");  }); 

Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -