Question

我正在寻找一些关于在弹出窗口中显示链接的帮助。以下是我的HTML：

HTML

<div id="popup"> 
<a href="#"><div id="popup-headline">News 1</div><div id="local">News Author</div>
<div id="date">| May 24, 2016</div><span><strong>News Text</strong><br /><br />News Text</span></a>
</div>

CSS

#popup { color: #000; background-color: #fff; }

#popup a, #popup a:visited {
    position: relative;
    display: block;
    width: 100%;
    line-height: 15px;
    text-align: left;
    padding: 0;
    padding-bottom: 5px;
    margin: 0;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    font-size: 1em;
    font-weight:normal;
    color: #0088cc;
}

#popup a span {
    display: none;
}

#popup a:hover { 
    background-color: #fff; 
}

/* the IE correction rule */
#popup a:hover  {
    color: #005580; 
    background-color: #fff;
    text-indent: 0; /* added the default value */
}

#popup a:hover span {
    display: block;
    position: absolute;
    border:4px solid #ddd;
    top: 4px;
    left: 60px;
    width: 226px;
    margin: 0px;
    padding: 8px;
    color: #005580;
    font-weight: normal;
    background: #fff;
    text-align: left;
    z-index: 2;
    overflow: hidden;
}

#date {
    color: #999;
}

#popup-headline {
    margin-top: 15px;
    line-height: 15px;
}

#popup-headline-2 {
    margin-top: 5px;
    line-height: 15px;
}

#local {
    line-height: 15px;
    float: left;
}

我遇到的问题是我想在新闻文本部分添加一个锚点链接，即<a href="link">Click Here</a>，但这会破坏代码，链接也不会出现在弹出窗口中。

如果有人可以请告诉我这是否可行，因为我真的想知道如何显示链接。

提前致谢。

我发现此功能的网站如下：

http://www.unisonleics.org.uk

如果您将鼠标悬停在Branch AGM上，则会在本地新闻组的主页底部显示弹出窗口，它会出现在弹出窗口中，我想添加一个链接。

Answer 1

您在弹出窗口中已有链接，并且您无法在链接中找到链接。

删除已存在的链接，然后添加链接。

#popup { color: #000; background-color: #fff; }

#popup .content, #popup .content:visited {
    position: relative;
    display: block;
    width: 100%;
    line-height: 15px;
    text-align: left;
    padding: 0;
    padding-bottom: 5px;
    margin: 0;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    font-size: 1em;
    font-weight:normal;
    color: #0088cc;
}

#popup .content span {
    display: none;
}

#popup .content:hover { 
    background-color: #fff; 
}

/* the IE correction rule */
#popup .content:hover  {
    color: #005580; 
    background-color: #fff;
    text-indent: 0; /* added the default value */
}

#popup .content:hover span {
    display: block;
    position: absolute;
    border:4px solid #ddd;
    top: 4px;
    left: 60px;
    width: 226px;
    margin: 0px;
    padding: 8px;
    color: #005580;
    font-weight: normal;
    background: #fff;
    text-align: left;
    z-index: 2;
    overflow: hidden;
}

#date {
    color: #999;
}

#popup-headline {
    margin-top: 15px;
    line-height: 15px;
}

#popup-headline-2 {
    margin-top: 5px;
    line-height: 15px;
}

#local {
    line-height: 15px;
    float: left;
}

<div id="popup"><span class="content">
  <div id="popup-headline">News 1</div><div id="local">News Author</div>
  <div id="date">| May 24, 2016</div><span><strong>News Text <a href="link">Click Here</a></strong><br /><br />News Text</span>
</span></div>

如何在弹出窗口中显示链接

1 个答案: