Wordpress更改主動和懸停li的顏色背景

Navbar > li > a在我的wordpress中不起作用。我試圖用#nav > li > a來更改其li的顏色和背景。
而我的主要問題是我不能改變我的家庭鏈接的類活動，有人可以發表一個樣本如何改變這個？Wordpress更改主動和懸停li的顏色背景

代碼在這裏非常感謝你！

<nav class="navbar navbar-default" role="navigation" id="nav"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="<?php echo home_url(); ?>"> 
       <img src="http://conlinscoffee.com/wp-content/uploads/2017/05/conlins_logo.png" 
        class=" img-responsive" alt="logo"> 
      </a> 
     </div> 
     <?php 
     wp_nav_menu(array(
      'menu'    => 'primary', 
      'theme_location' => 'primary', 
      'depth'    => 2, 
      'container'   => 'div', 
      'container_class' => 'collapse navbar-collapse', 
      'container_id'  => 'bs-example-navbar-collapse-1', 
      'menu_class'  => 'nav navbar-nav', 
      'fallback_cb'  => 'WP_Bootstrap_Navwalker::fallback', 
      'walker'   => new WP_Bootstrap_Navwalker()) 
      ); 
     ?> 
     <div class="pull-right" id="searchbar"> 
      <?php dynamic_sidebar('top-menu'); ?> 
     </div> 
    </div> 
</nav>

來源

2017-05-09 France

你可以發佈一段HTML代碼，它通過wordpress運行後實際生成了嗎？ – AnilRedshift

是的請，或者活的網站，我們可以檢查那裏的元素 –

我在現場運行這項工作，conlinscoffee.com我第一次創建了我自己的主題 – France

您可以使用下面的CSS此

#bs-example-navbar-collapse-1 li > a { 
    // your css here 
} 


#bs-example-navbar-collapse-1 li:hover > a, 
#bs-example-navbar-collapse-1 li.current_page_item > a { 
    // your css here 
}

或者你可以使用

#menu-main_menu > li > a { 
    color: #fff; 
} 

#menu-main_menu > li:hover > a, 
#menu-main_menu > li.current_page_item > a { 
    color: #c42027; 
    background-color: #fff; 
}

來源

2017-05-09 04:26:08

不工作的傢伙。 – France

@法國檢查更新的答案，它會工作 –

是的！它的作品，但我也想改變我的活動主頁鏈接到紅色 – France

.navbar-default .navbar-nav li>a:hover{color:#fff;}

來源

2017-05-09 04:31:08 Osama

不工作的傢伙，我已經試過這個 – France

不工作？你可以請包括完整的代碼，爲什麼它不工作這很奇怪 – Osama

你可以訪問我的網站conlinscoffee.com – France

嘗試這樣的事：

.className li:hover{ 
//set background color for li here. 
//background-color: #fff; 
} 

.className li:hover > a{ 
//set color for the text here. 
//you can set the color of text like here. 
color: #000 !important; //you can use any color, just use !important keyword for replacing inherited colors. 
}

//對不起，我沒有足夠的評價聲譽。

來源

2017-05-09 04:40:11 conficker

.navbar李：hover {background：#fff; }這是工作，但在.navbar李：懸停>一個不工作，我想改變我的菜單的文本，而不是它的繼承顏色白色 – France

.navbar李：懸停> {顏色：＃000; }注意：如果你有背景顏色#fff和文本顏色#fff（都是相同的顏色），你看不到文本。 – conficker

不要改變李的本身。

使用此選擇

.navbar-nav > li > a { background: white; }

白色背景是樣品

對於活動，只需添加：活躍像這樣

.navbar-nav > li > a:active { background: white; }

您還可以添加重要的是這樣如果仍然不能正常工作

.navbar-nav > li > a:active { background: white!important; }

來源

2017-05-09 04:45:47

@法國此作品 –

當前的CSS在您的網站中的菜單項沒有問題。您遇到的問題是由您的導航標記導致的。具體看看這行代碼在你的style.css：

#nav { 
    background: #c42027; 
    border: none; 
    box-shadow: none; 
    margin: 0 auto; 
    margin-top: 0px; 
    margin-bottom: -20px; 
}

的邊距規則導致資產淨值元素後的股利的權利上去並覆蓋列表項，從而防止它們工作與盤旋。將#nav margin-bottom更改爲0，問題將得到解決。

來源

2017-05-09 05:07:06 Nadav

我現在刪除所有邊距，因爲我將刪除我的旋轉木馬並將其更改爲旋轉木馬插件以便於使用 – France

Wordpress更改主動和懸停li的顏色背景

回答

相關問題