Result
jQuery
$(document).ready(function() { //最初の画像にclass="last"を追加 $(".container img:first-child").addClass('last'); //画像をクリックでイベント発火 $(".container img").click(function() { //class="last"がある場合は画像をフェードアウトさせてz-indexを追加 $(this).fadeOut('normal', function() { if ( $(this).hasClass('last') ) { $("img", $(this).parent()).css('z-index', 10); } else { $(this).css('z-index', 9) } $(this).show(); }); }); //マウスが要素に入った時にイベント発生 $(".container").mouseenter(function() { //class="tooltip"要素を表示させる $(".tooltip", this).show(); }).mousemove(function(e) { //class="tooltip"に位置情報に応じてtopとleftの数値をcssとして加える $(".tooltip", this).css({ 'top' : e.pageY - this.offsetTop + 8, 'left' : e.pageX - this.offsetLeft + 15 }); }).mouseleave(function() { //ツールチップの形状を決める。ここではdiv要素 $(".tooltip", this).hide(); }).append('<div class="tooltip">Next</div>'); //帯(タイトル)ではツールチップを非表示とする $(".container span").mouseenter(function() { $(".tooltip", $(this).parent()).hide(); }).mouseleave(function() { $(".tooltip", $(this).parent()).show(); });}); |
css
.container { position: relative; width: 636px; height: 400px; margin: 0 auto;}.container img { position: absolute; top: 0; left: 0; z-index: 10;} .container span { position: absolute; top: 20px; left: 10px; width: 550px; padding: 10px; color: #FFF; background: #000 ; z-index: 11; opacity: 0.7 ; filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70) ;}.container span a { float: right; color: #FFF; font-size: 12px;}.tooltip { position: absolute; display: none; padding: 3px 10px; background: #fff; color: #222; border: 1px solid #CCC; font-family: Arial; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; z-index: 11;} |
html
<div class="container"> <img src="01.jpg" alt="" /> <img src="02.jpg" alt="" /> <img src="03.jpg" alt="" /> <img src="04.jpg" alt="" /> <img src="05.jpg" alt="" /> <span><a href="http://example.com">link</a> Title</span> </div> |
via
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
