VWSとは フォーラム Lightning [ 解決済 ] メニューのリンクの文字と背景のカラー設定について

[ 解決済 ] メニューのリンクの文字と背景のカラー設定について

  • このトピックには2件の返信、2人の参加者があり、最後にwptakaoにより6ヶ月、 3週前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #35160

    wptakao
    参加者

    いつもご教示感謝しています。
    Lightning Pro バージョン: 4.0.8 (子テーマ)
    Skin Pale バージョン 5.1.5

    PC表示でメニューのリンクの背景とカラーの設定をしたいのですが、望むような表示ができません。
    (添付ファイルをご覧ください。)
    設定方法をご教示ください。あるいはこれは仕様上変更できないことなのでしょうか。

    1)メインメニューにカーソルを合わせたときに色を変更し、なおかつ文字を白抜きしたい。
    2)フッターメニューでアクティブの前と後は白抜きにし、カーソルを合わせたときには白抜きのまま。アンダーラインをつけたい。
    (なお、フッターのメニューはフッターウィジットでナビゲーションメニューを設定し、背景はカラー設定をしています。)

    追加cssでは以下のように設定しました。
    設定を誤っているのかもしれません。ご指摘ください。

    .menu-item-object-page a:link, .menu-item-object-page a:visited, .menu-item-has-children a:link,.menu-item-has-children a:visited
    {
    color:#2d5605;
    }

    .menu-item-object-page a:hover,.menu-item-object-page a:active, .menu-item-has-children a:hover,.menu-item-has-children a:active{
    color:#fff;
    background-color:#2d5605
    }

    .menu-footer_nav2-container a:link, .menu-footer_nav2-container a:visited, {
    color:#fff;
    }

    .menu-footer_nav2-container a:hover{
    color:#fff;
    text-decoration:underline;
    }

    (それぞれの menu-item-119 などリンクのクラスに指定してみましたが変わりませんでした)

    Attachments:
    You must be logged in to view attached files.
    #35166

    DRILL LANCER
    モデレーター

    上手く解釈しきれていないのですが、私なりの解釈に基づいた回答をさせていただきます。

    1)メインメニューにカーソルを合わせたときに色を変更し、なおかつ文字を白抜きしたい。

    キーカラーの設定状況がよくわからないのですが、だいたい下記コードでいけるかと・・・

    @media (min-width: 992px) {
    	ul.gMenu a:hover,
    	.gMenu > li[class*=current] {
    		/*キーカラーに設定した色*/
    		background-color: #2d5605;
    	}
    	
    	nav ul.gMenu > li > a:hover .gMenu_description,
    	nav ul.gMenu > li.current-menu-item > a .gMenu_description,
    	ul.gMenu a:hover .gMenu_name,
    	.gMenu > li[class*=current] .gMenu_name {
    		color: #fff;
    	}
    }

    2)フッターメニューでアクティブの前と後は白抜きにし、カーソルを合わせたときには白抜きのまま。アンダーラインをつけたい。

    周囲の状況がよくわかりませんが、だいたい下記コードでいけるかと・・・

    .widget_nav_menu .menu-footernavigation-container a {
    	color:#fff;
    }
    
    .widget_nav_menu .menu-footernavigation-container a:hover {
    	color:#fff;
    	text-decoration:underline;
    }
    #35169

    wptakao
    参加者

    ありがとうございました。
    解決できました。

    フッタのメニューは
    a:link と a:visited
    と指定すると解決できした。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。