Question

我想知道当我将鼠标悬停在我的引导程序导航栏中的链接上时如何更改背景颜色

HTML：

<nav class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#about">About me</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>

  </div>
</nav>

的CSS：

.navbar{
  background-color:#ff9900;
}
.navbar-nav > li > a{
  color:white;
  font-size:16px;
  font-weight:bold;
}

.navbar-nav > li > a:hover{
  color:blue;
  background-color:#ff9900;
}
.navbar-default .navbar-nav > li > a:focus {
  color:blue;
  background-color:#ff9900;
}

Answer 1

更改此

.navbar-nav > li > a:hover{
  color:blue;
  background-color:#ff9900;
}

对此：

.navbar-nav > li > a:hover{
  color:blue;
  background-color:#ff9900 !important;
}

Answer 2

将背景颜色移动到链接而不是整个导航栏
在您的链接中添加display：block（如果您希望链接占据整个宽度）
更改所需的背景颜色。在下面的示例Neo4j-core

class TestController < ApplicationController

    def test
        q = "Match (n) return n;"
        data = Neo4j::Session.query(q)
        output = clean_response(data)

        render json: output
    end

    private

    def clean_response(data)
        # data = Enumerator
        data = data.map(&:to_h)
        # data = [ { x: => CypherXxxx <Object>},...   ]
        data.map! do |entry|
            hash = JSON.parse(entry.to_json)
            # Clean json of the entry
            entry = delete_keys(hash)
        end
    end

    def delete_keys(hash)
        # Recursive func to delete session/response_hash from a hash of any depth 
        if(hash.class == Hash)
            hash.delete("session") if hash.keys.include?("session")
            hash.delete("response_hash") if hash.keys.include?("response_hash")
            hash.each_value{|value|
              value = delete_keys(value)
            }
        end
    end
end

hotpink

如何更改引导程序导航栏中的链接背景颜色

2 个答案: