ポップアップウィンドウ内にリンクを設定する方法

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>