Intereting Posts
Включение более старой версии jQuery для IE7 / IE8 Добавление wp_enqueue_media (); вызывает проблему Отображение содержимого моих плагинов на основе страниц post_id Где поместить правила перезаписи W3 Total Cache в .htaccess? Ошибка WordPress: требуется обновление базы данных Сортируемый столбец с пользовательской таксономией в пользовательских типах сообщений Плагины, загружающие несколько копий JQuery Как получить доступ к параметрам, исходящим из действия? Почему нет / 2013/01 / правильно вернуть январские архивы в archive.php? Добавить что-то к началу содержимого $ wpdb-> заменить / заменить или обновить первичный ключ Nav Walker добавить изображение Показать все альбомы в nggallery на странице Моя пользовательская страница настроек администратора не использует пользовательские CSS и JS даже после успешной регистрации и регистрации скриптов Отображение сообщений в текущей категории – с использованием древесины

Заголовок, зависающий на изображении

Я использовал следующий код, чтобы сделать слайд-шоу с изображением категории. Я хочу показать заголовок сообщения при наведении на изображение. Но я не знаю, как это сделать. Кто-нибудь, пожалуйста, помогите.

Код в 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 ); 

Код для показа слайд-шоу

 <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 --> 

Код в 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> 

затем скрыть диапазон с помощью CSS, показать его при наведении на элемент <li> , поместить его поверх изображения с помощью CSS.

Пример:

 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; }