Intereting Posts
пользовательская тема: английский .mo файл не работает удалить сообщение meta из db, даже если этого не существует? Отображать содержимое метабокса, если оно заполнено Удалить старый липкий пост в публикации .htaccess домашняя конфигурация Последний комментарий должен быть первым сообщением в блоге отображение гибких полей из опций add_filter с retrieve_password_message () не работает в плагине, но работает в functions.php Создавать и обновлять пользовательские файлы cookie на основе нескольких значений GET и POST для посетителей первого раза? Получить постоянную ссылку на сообщение, связанное с привязкой к Как войти в систему по электронной почте только без имени пользователя? Как показать сообщения, упорядоченные по случайным Подтверждение подлинности электронной почты для регистрации (сохранение неутвержденных пользователей из таблицы пользователей) Как написать urlencode () описание блога? Стиль WP Enqueue на всех подключаемых страницах

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

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

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

Ниже приведен пример того, что я хочу введите описание изображения здесь

Вы можете увидеть название изображения на изображении. Я хочу то же самое, но единственная разница в том, что мне нужен заголовок, когда я наводил изображение.

Solutions Collecting From Web of "Заголовок, зависающий на изображении"

Альтернативный подход:

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