悬停在特色图像上的标题

我用下面的代码制作了一个类别的特色图片幻灯片。我想在图像上悬停时显示帖子的标题。但我不知道怎么做。任何人请帮忙。

Code in functions.php

register_post_type( \'featured_content\' );

add_action( \'init\', \'get_the_js\' );

function get_the_js() {
wp_register_script( \'jquery.cycle\', get_stylesheet_directory_uri(). \'/js/jquery.cycle.lite.js\', array(\'jquery\'), TRUE);
wp_enqueue_script(\'jquery.cycle\' );
wp_enqueue_script( \'custom\', get_stylesheet_directory_uri(). \'/js/custom.js\', array(\'jquery.cycle\'), TRUE);
        }

add_image_size( \'featured\',  700, 285, true );

Code for displaying slideshow

<div id="home-slider">

    <div class="cycle-nav">
        <a id="prev2" href="#">«Prev</a> <a id="next2" href="#">Next»</a>
    </div>

    <ul id="cycle" class="pics">

        <?php
                    $i = 1;
                    global $wp_query;
                    $custom_query = array(\'category_name\' =>\'products\',
                        \'posts_per_page\' => -1
                    );
                    if ( $custom_query )
                        query_posts( $custom_query );
                    $more = 0;
                ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <li class="cycle-item slide-<?php echo $i; ?>">

             <a href="<?php the_permalink();?>"><?php   the_post_thumbnail(\'featured\'); ?></a>
        </li>

        <?php
                    $i++;
                    endwhile;
                    endif;
                ?>
                <?php wp_reset_query(); ?>

    </ul>

</div> <!-- /home-slider -->

Code in custom.js

jQuery.noConflict();
jQuery(document).ready(function($) {
jQuery(\'ul#cycle\').cycle({
        timeout: 9000,
        speed: 1500,
        delay: 2000,
        prev:   \'#prev2\',
        next:   \'#next2\'
    });
});

CSS

 #home-slider {
width:735px;
 overflow:hidden;
 height:280px; 
float:right; 
position:relative;
 margin-right:0; 
display:inline-block

}

a#prev2 {
position:absolute; 
width:31px; 
height:32px; 
text-indent:-999em; 
z-index:100; 
background-position:0 0; 
background-image:url(images/cycle-nav.png); 
top:185px; 
box-shadow:1px 1px 2px rgba(2,2,2,0.3); 
-moz-box-shadow:1px 1px 2px rgba(2,2,2,0.3);  
-webkit-box-shadow:1px 1px 2px rgba(2,2,2,0.3)
}

a#prev2:hover {
background-position:0px -32px
}

 a#next2 {
position:absolute; 
right:0px; 
width:31px; 
height:31px; 
display:block; 
z-index:100; 
top:185px; 
background-position:31px 0px; 
background-image:url(images/cycle-nav.png); 
overflow:hidden; 
text-indent:-999em; 
box-shadow:1px 1px 2px rgba(2,2,2,.3);  
-moz-box-shadow:1px 1px 2px rgba(2,2,2,0.3);  
-webkit-box-shadow:1px 1px 2px rgba(2,2,2,0.3)
}

 a#next2:hover {
background-position:31px -32px
}

ul#cycle { 
margin:0;  
padding:0;  
list-style:none
}

ul#cycle .excerpt {
width:700px; 
height:82px;
background: rgb(0, 0, 0); 
background:rgba(0,0,0,.5); 
position:absolute; bottom:0;
padding:10px 20px 10px 25px; 
overflow:hidden
}

一零

九

您可以在图像上看到图像的标题。我想要相同的，但唯一的区别是，当我在图像上悬停时，我需要标题。

<li class="cycle-item slide-<?php echo $i; ?>"> <span class="featured-title"><?php the_title(); ?></span> <a href="<?php the_permalink();?>"><?php the_post_thumbnail(\'featured\'); ?></a> </li>

li.cycle-item { position: relative; } li.cycle-item .featured-title { display: none; } li.cycle-item:hover .featured-title { display: block; position: absolute; top: 20%; left: 0; }

使用本地回退加载javascript CDN(非jQuery)

我正在尝试修改this 使用本地回退从CDN注册jQuery插件并将其排队。然而，当URL失败时（或者如果我给它一个假URL），Firebug在加载本地回退之前会收到2个对URL的中止调用。使用类似于链接的jQuery回退，它只接收1个中止的调用。看起来它在使用回退之前尝试加载脚本两次。function gavsiu_scripts() { if (is_single() && comments_open() && get_option(\'thread_com

相关推荐

使用本地回退加载javascript CDN(非jQuery)