0

背景画像とその中のコンテンツの両方をクリック可能にしたいと思います。実装方法がわかりません...

画像：

ここに画像の説明を入力

画像とコンテンツの両方をクリック可能にしたい。

HTML部分：

<div class = "reportslistitem">
   <a href="[[ url ]]"
       target=="_blank">
          [[ startdate ]] -
           [[ enddate ]]
   </a>  
</div>

CSS 部分:

.reportslistitem{
    width:120px;
    height:140px;
    display:block;
    float: right;
    background:url('../images/Report-icon-without-text.png');
}


a{
 font: bold 12px 'Thin2Regular';
 text-decoration: none;
 color: rgb(0,0,0);
 padding: 10px 15px;
 position: relative;
 text-align: center;
 display:block;
 padding: 0px;
 position:relative;
 top:25px;
 }

どうすれば変更できますか? いくつかのガイダンスが必要です...

4

2 に答える 2

3

HTML5 を使用している場合、セクション全体をアンカー タグでラップすることが有効になりました。

<a href="[[ url ]]" target="_blank">
   <div class = "reportslistitem">
          [[ startdate ]] - [[ enddate ]]
   </div> 
</a>

CSSは次のようにする必要があります

.reportslistitem{
    width:120px;
    height:140px;
    display:block;
    background:url('../images/Report-icon-without-text.png');
}


a{
 font: bold 12px 'Thin2Regular';
 text-decoration: none;
 color: rgb(0,0,0);
 padding: 10px 15px;
 text-align: center;
 padding: 0px;
 display:block;
 width:120px;
 height:140px;
 }​
于 2012-07-10T07:54:05.507 に答える
0

背景をクリックすることはできません。背景画像をリンクに割り当てることで、このような動作をエミュレートできます。

を削除/除外して、DIVこのクラスをアンカーに設定するだけです。display: block;をリンクに割り当てて、幅と高さを指定することもできます。

于 2012-07-10T07:56:49.200 に答える