2017-10-08 18 views
0

私は以下に与えられたjsfiddleのような広告を持っています。下のコーナーに広告の上にリンクテキストを表示する方法

jsfiddle

HTML

<div class='pc_singleblock'> 
    <div style='box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; text-align:center; font-size: 11px; font-family:helvetica; font-weight: bold; width:300px; height:250px; background:#E7E7E7; color:#666; line-height:250px;position:relative;' 
    class='pc_block_active'> 
    <a target='_blank' href='//cdn.adclerks.com/core/adclick/3485/3329' alt='Followlike' title='Followlike' style='width: 300px; height: 250px;'><img width=300 height=250 src='//static.adclerks.com/ads/3485.jpg' /></a> 
    <div class="tag">Adtext</div> 
    </div> 
</div> 

CSS

私は右下の隅に、このページ Demo adsにデモ広告のショーとして、この広告の広告テキストを表示したい
 <style type='text/css'>.pc_block a { 
    color: #666!important; 
    margin: 0; 
    padding: 0; 
    } 

    .pc_block a:hover { 
    color: #222!important; 
    } 

    .pc_block { 
    margin: 0; 
    } 

    .pc_block:hover { 
    margin: 0; 
    background: #ddd; 
    text-decoration: underline !important; 
    } 

    .pc_block_inactive { 
    border: 1px solid #BBB; 
    } 

    .pc_block_inactive:hover { 
    border: 1px solid #999; 
    } 

    </style> 

。最初にシンボルを表示し、このデモページに示されているようにホバー上でリンクするように変更します。これを行う方法?前もって感謝します。

答えて

0

あなたはあなたのリンクを配置することができます

.pc_block_active {position: relative;} 
    .tag { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    } 

・ホープ、この作品

+0

はまた、マウスホバーでこのdiv要素の内容を変更したいです – John

関連する問題