内联锚点不起作用

Inline Anchor Not Working

本文关键字：不起作用      更新时间：2023-09-26

我不熟悉内联锚点样式（链接），我们如何让它来展示时尚？Javascript/JQuery 编码或缺少某些内容？

[ http://codepen.io/anon/pen/dPMNVE ]

悬停在"气味"上，例如在下面的这一段中：

在瓦尔多港墙内，然后，我们来到了一个系泊处，这个地方的气味包围了我们并占有了我们。在我们周围海浪的海港上摇晃着大约两百艘奇怪的北方钻井平台，几乎都与鱼类贸易有关。

感谢您的指导。

首先从此链接下载项目

然后将对 CSS 样式的引用添加到您的头部分，并使用内置的 CSS 类，如下所示：

<html>
<head>
<head>
        <link href="http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,800" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <link rel="stylesheet" type="text/css" href="css/component.css">
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
</head>
<body>
<div class="container">
<section class="link-flip">
                <p>The few tins of <a href="#">provisions</a> we did take were mainly to serve as luxuries. For instance, we had quite a large <a href="#">supply</a> of foie gras and larks in aspic.</p>
                <p>I had a vivid recollection of how the last tin of that <a href="#">pâté de foie gras</a> went.</p>
            </section>
</div>
</body>
</html>

您可以从此库中仅复制所需的 css 类，然后像此小提琴演示一样使用它们

试试这个：

<div class="hoverlinks">Inside Vardö harbour walls, then, to a mooring we came, and the <a href="#">smells</a> of the place closed round us and took possession. Bobbling about on the harbour swell around us were some two hundred vessels of strange Northern rig, and almost all connected with the trade in fish.</div>
    <style>
    .hoverlinks a {
        border-bottom: 1px solid rgba(52,73,94,0.4);
        font-weight: 500;
        -webkit-transition: background-color 0.3s, border-color 0.3s;
        transition: background-color 0.3s, border-color 0.3s;
    }
    .hoverlinks a:hover,
    .hoverlinks a:focus {
        border-color: rgba(52,73,94,0);
        background-color: rgba(52,73,94,0.1);
    }
    </style>

可能会有所帮助。

相关文章：