jQuery Mouseover targetting all Divs in Wordpress Blog template -
i have wordpress blog template image floated right , text (title, date, category, summary) floated left. want change text background color , text-color when hovering mouse on image, when hover mouse on it, jquery targetting posts in blog page. want target single post, how it?
here php
<h1 class="thumb" style="z-index:2; width:252px;"> <a class="odkaz" style="padding:15px 15px 5px 15px; width:252px; heighty:109px;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 --> here jquery
$('.thumb').mouseover(function() { $('.thumb a').css("color","black"); $('.thumb a').css("background","#ff7f00"); $('.post-ut').css("color","black"); $('.post-ut a').css("color","black"); $('.post-ut').css("background","#ff7f00"); $('.entry-summary p').css("color","black"); $('.entry-summary p').css("background","#ff7f00"); });
$('.thumb').mouseout(function() { $('.post-ut').css("color","white"); $('.post-ut a').css("color","white"); $('.post-ut').css("background","black"); $('.thumb a').css("color","white"); $('.thumb a').css("background","black"); $('.entry-summary p').css("color","white"); $('.entry-summary p').css("background","black"); });
you can using this second parameter elements inside .thumb element. others, if have common parent, can use this.parent() follows:
$('div.thumb').mouseover(function() { $('a', this) .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"); } the second parameter of jquery selector $ limits query elements inside element. this here refer element mouseover-ed (.thumb) in case.
Comments
Post a Comment