如何在弹出窗口中设置链接

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

在对的地方新闻版块首页的底部，如果你将鼠标悬停在科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>