[英]jQuery mouseover on text and padding area not working
我有一個wordpress博客,在循環中,布局類似於左側的Text(標題,日期,摘要),並且圖像向右浮動(向左填充50%),我想在左側和頂部分別留出50%的空間,使該元素(標題日期,摘要)上的所有元素都變為可懸停(將鼠標懸停在左側區域時,所有文本顏色將變為黑色,背景顏色將變為#ff7f00;)。
post-ut的CSS
.post-ut {
display:block;
color:#999999;
z-index:2;
float:left;
letter-spacing:1px;
font-size:13px;
position: relative;
width:282px;
}
.post-ut a {
max-width:74px;
min-width:74px;
text-decoration:none;
color: #999999;
display:inline-block;
z-index:1;
}
這是我正在使用的jQuery代碼的想法,這是行不通的
$('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");
});
女巫帖子循環的php代碼是
<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 to %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 by -->
</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 -->
我正在使用jquery來懸停圖像,並且可以正常工作,但是不能在上面發布代碼。 工作代碼是
$('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");
});
更新:刪除position:relative之后; 從post-ut類中,懸停有效,但文本不可見
從代碼中刪除p並檢查。
$('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");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.