Result
jQuery
$(document).ready(function () { //title属性を探してspan内に放り込む $('#items .item').each(function () { title = $(this).attr('title'); $(this).append('<span class="caption">' + title + '</span>'); $(this).attr('title',''); }); $('#items .item').hover( function () { //ホバー時に全てのアイテムを透過処理 $(this).siblings().css({'opacity': '0.1'}); //マウスが乗っかってるのだけ透過を戻してclass="effect"を追加 $(this).css({'opacity': '1.0'}).addClass('effect'); //さっきのspanをフェードイン $(this).children('.caption').fadeIn(); }, function () { //spanを隠す $(this).children('.caption').fadeOut(); } ); $('#items').mouseleave(function () { //マウスが外れたらリセットする $(this).children().fadeTo('100', '1.0').removeClass('effect'); });}); |
css
body { font-family:arial; margin-top:70px;} img {border:none;} #items a { text-decoration:none; color:#666; } #items { width:786px; margin:0 auto;} #items .item { display:block; width:190px; height:120px; border:1px solid #ddd; float:left; position:relative;} #items .item .caption { position:absolute; top:80px; left:2px; padding:3px; font-size:10px; color:#fff; width:180px; display:none; background:#666;} .clear { clear:both; } |
html
<div id="items"> <a class="item" href="javascript:void(0);" title="title01">Item01</a> <a class="item" href="javascript:void(0);" title="title02">Item02</a> <a class="item" href="javascript:void(0);" title="title03">Item03</a> <a class="item" href="javascript:void(0);" title="title04">Item04</a></div> <div class="clear"></div> |
via
Simplest jQuery Spotlight Effect Tutorial | Queness
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
