Question

当Bootstrap项在被访问后仍保持白色背景色时，我遇到了问题。这是HTML

.my-mail{
    background-color: transparent;
    cursor:pointer ;
}


.nav-mail:hover:not(.active){
    border-left: #007f7e 1px solid;
    border-right: #007f7e 1px solid;
    color: #007f7e;
    /*background-color: transparent;*/
    cursor: pointer;
}
.nav-mail:active{
    color: white;
    cursor: text;
    /*background-color: transparent;*/
    border-left: transparent 1px solid;
    border-right: transparent 1px solid;
    border-left: none;
}
.nav-mail:visited{
    /*color: white;*/
    cursor: text;
    background-color: transparent;
    border-left: transparent 1px solid;
    border-right: transparent 1px solid;
}
.nav-logo:hover{
    cursor: pointer;
}
.nav-mail-icon{
    font-size: 15px;
    background-color: transparent;
    cursor: pointer;
}
a:active {
    background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top">
    
    <div class="container-fluid" >
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navigation" id="myList">
                <li  class="nav-btn active"><a href="#1">Home</a></li>
                <li class ="nav-btn"><a href="#2">About Us</a></li>
                <li class ="nav-btn"><a href="#3">Our projects</a></li>
                <li class ="nav-btn"><a href="#4">Cooperation</a></li>
                <li class ="nav-btn"><a href="#5">Services</a></li>
                <li class ="nav-btn"><a href="#7">Contacts</a></li>
                <li class = "nav-item my-mail"><a href="mailto:MyEmail@gmail.com" class="nav-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

在上面的代码中，而不是MyEmail链接中，我有真实的电子邮件。这是唯一被访问后仍突出显示的项目。我确信它与引导导航栏有关，因为我还有另一个具有相同链接 mailto 的元素，并且效果很好。

如果您有任何想法，请问问题。如果您遵循以下示例：https://jsfiddle.net/borovec/aq9Laaew/272810/

如果您打开菜单并按除home以外的任何项目，将会看到同样的问题，它将保持白色背景色。

谢谢！

Answer 1

尝试一下

.nav >li>a:focus {
    background-color: transparent;
}

Answer 2

我认为您只需要为:focus设置css 喜欢..

li a:focus {
    background-color: rgba(0,0,0,0) !important;
    border:none !important;
}

引导后的Bootstrap Li项目补品以白色突出显示

2 个答案: