上記のリンク先の例で、カテゴリ(タブ)メニューのマウス移動で、次のタブをクリックするまで背景色を保持したいのですが、マウスが移動すると背景色が消えてしまいます。
タブの移動で、次のタブをクリックするまで背景色を保持するにはどのようにすればよいのでしょうか。
html
1 2<script type="text/javascript"> 3//<![CDATA[ 4$(function() { 5 $("#tab-t li").click(function() { 6 var num = $("#tab li").index(this); 7 $(".content_wrap").addClass('disnon'); 8 $(".content_wrap").eq(num).removeClass('disnon'); 9 $("#tab li").removeClass('select'); 10 $(this).addClass('select') 11 }); 12}); 13//]]> 14</script> 15<ul class="tab-1" id="tab-t"> 16 <li class="hvr-sweep-to-top kaisen-1 select"><a href="#tab1"><?php echo get_cat_name(192); ?></a></li> 17 <li class="hvr-sweep-to-top kaisen-2"><a href="#tab2"><?php echo get_cat_name(193); ?></a></li> 18 <li class="hvr-sweep-to-top kaisen-3"><a href="#tab3"><?php echo get_cat_name(194); ?></a></li> 19 <li class="hvr-sweep-to-top kaisen-4"><a href="#tab4"><?php echo get_cat_name(195); ?></a></li> 20 <li class="hvr-sweep-to-top kaisen-5"><a href="#tab5"><?php echo get_cat_name(196); ?></a></li> 21 <li class="hvr-sweep-to-top kaisen-6"><a href="#tab6"><?php echo get_cat_name(197); ?></a></li> 22</ul> 23<div class="tab_content"> 24 <div class="tab_area content_wrap" id="tab1"> 25 <ul class="tab-item-set"> 26 <?php cat_post_list( 10, 192 ); ?> 27 </ul> 28 <div class="top-img-f-r"> 29 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 192 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> 30 </a> 31 </div> 32 </div> 33 <div class="tab_area content_wrap disnon" id="tab2"> 34 <ul class="tab-item-set"> 35 <?php cat_post_list( 10, 193 ); ?> 36 </ul> 37 <div class="top-img-f-r"> 38 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 193 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 39 </div> 40 </div> 41 <div class="tab_area content_wrap disnon" id="tab3"> 42 <ul class="tab-item-set"> 43 <?php cat_post_list( 10, 194 ); ?> 44 </ul> 45 <div class="top-img-f-r"> 46 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 194 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 47 </div> 48 </div> 49 <div class="tab_area content_wrap disnon" id="tab4"> 50 <ul class="tab-item-set"> 51 <?php cat_post_list( 10, 195 ); ?> 52 </ul> 53 <div class="top-img-f-r"> 54 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 195 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 55 </div> 56 </div> 57 <div class="tab_area content_wrap disnon" id="tab5"> 58 <ul class="tab-item-set"> 59 <?php cat_post_list( 10, 196 ); ?> 60 </ul> 61 <div class="top-img-f-r"> 62 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 196 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 63 </div> 64 </div> 65 <div class="tab_area content_wrap disnon" id="tab6"> 66 <ul class="tab-item-set"> 67 <?php cat_post_list( 10, 197 ); ?> 68 </ul> 69 <div class="top-img-f-r"> 70 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 197 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 71 </div> 72 </div> 73</div> 74
css
1a:link, a:visited { 2 color: black; 3 text-decoration: none; 4} 5.tab-1 li a:visited{ 6 color: blue; 7} 8.tab-item-set li a:hover { 9 color: #114783; 10} 11.tab-1 li.kaisen-1:hover{ 12background:#004ea2 !important; 13} 14.tab-1 li.kaisen-2:hover{ 15background:#ff5600 !important; 16} 17.tab-1 li.kaisen-3:hover{ 18background:#4788ee !important; 19} 20.tab-1 li.kaisen-4:hover{ 21background:#c03 !important; 22} 23.tab-1 li.kaisen-5:hover{ 24background:#ff1c9a !important; 25} 26.tab-1 li.kaisen-6:hover{ 27background:#04B404 !important; 28} 29@media (max-width: 768px) 30.tab-1 li { 31 width: 16% !important; 32} 33.select{ 34background:yellow; 35} 36.disnon { 37 display: none; 38}
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/26 08:47
2019/01/28 04:08