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的颜色背景

回答

相关问题