Question

我不熟悉Inline Anchor styles(link)，我们怎样才能让它显示时尚？ Javascript / JQuery编码或丢失了什么？

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

在下面的这一段中悬停“闻起来” ，例如：

然后，在Vardö海港城墙内，我们来到了一个系泊设施，这个地方的闻起来围绕着我们并占据了。关于我们周围的港湾膨胀的大概是两百艘奇怪的北方钻井船，而且几乎都与鱼类贸易有关。

我很感激你的导游。

Answer 1

试试这个：

<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>

可能会有所帮助。

Answer 2

首先从此link

下载项目

然后将css样式的引用添加到head部分并使用内置的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类，然后像fiddle demo一样使用它们

内联锚点不起作用

2 个答案: