css - 移动时的悬停情况(在视频中)

Question

index.html

<!-- HEADER -->
<header class="top-header" id="home">

    <div class="container">


   <div class="row">

    <div class="col-sm-3">

    <h1 class="logo hidden-xs"><a href="#top" class="text-hide center-block">Portfolio Page of Burak Aydin</a></h1>

            </div> <!-- end col-sm-3 -->

            <div class="col-sm-9">

                <nav class="navbar" role="navigation">

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#top" class="home">Home</a></li>
                        <li><a href="#about" class="about">About</a></li>
                        <li><a href="#portfolio" class="portfolio">Portfolio</a></li>
                        <li><a href="#contact" class="contact">Contact</a></li>
                    </ul>

                </nav>

            </div> <!-- end col-sm-9 -->

        </div> <!-- end row -->

    </div> <!-- end container -->


</header>

---

styles.css

nav.navbar {background-color:transparent;}
ul.nav {padding-top:1em;}
ul.nav li {text-transform: uppercase;font-weight:bold;}
ul.nav li a {-webkit-transition: color .3s ease-in-out; transition: color .3s ease-in-out;}
ul.nav li a:hover,ul.nav li a:active,
ul.nav li a:after{background-color:transparent;color:#ff6760;}

---

首先，我使用了 twitter bootstrap 3。

1. 这些问题发生在 mozilla 和 IE 的任何版本上。当我将鼠标悬停在菜单上然后向右下方移动时，您会在菜单链接后面看到一个灰色背景。
2. 当您点击投资组合部分的照片时，您会看到一个弹出窗口。有文字装饰。我不想要文字修饰。

这个问题很难提。所以我上传了一个视频。这里是:我在这个网站上提到的问题:LINK

Answer 1

在 scaffolding.less 中有 a:hover 和 a:focus 下划线并变成 LESS 变量中设置的主要颜色。

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

所以如果你想删除它，请执行以下操作:

.my-container-with-content a:hover, .my-container-with-content a:focus {
text-decoration:none;
}

如果整个内容都在包装器中，例如 ( a > div ):

所以如果你想删除它，请执行以下操作:

a:hover .my-container-with-content,  a:focus .my-container-with-content {
text-decoration:none;
}

确保此 CSS 在 Bootstrap CSS 之后。将具有要删除的悬停/焦点的容器的类命名为“my-container-with-content”。