时间戳

首页 > 解决方案 > Bootstrap li item remeins 在访问后以白色突出显示

html - Bootstrap li item remeins 在访问后以白色突出显示

问题描述

当 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 以外的任何项目，您会看到同样的问题，它将保持白色背景颜色。

提前致谢！

标签： htmlcsstwitter-bootstrap-3

解决方案

尝试这个

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

推荐阅读