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.

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

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

Answer 1

在scaffolding.less中有一个：hover和a：焦点，用于下划线并转换为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＆gt; div）：

因此，如果要删除它，请执行以下操作：

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

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

移动时悬停案例（视频中）

1 个答案: