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;"> <?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
Post a Comment