背景イメージのハイパーリンクを作成する方法は？

Question

各ファイル名の最後にページのファイルの一覧を表示しています.1つの背景イメージ（十字マーク）を使用しています。しかし、私はその画像をクリック可能な要素にする必要があります。私はどのように私はそれを達成することができます

下の画像を参照してください、それは与えられたpath.For詳細から削除する必要があります画像をクリックすると、いくつかの提案を与えます。 HTMLとCSSコードの下には私はあなたがjQueryのを使用することができ、その画像を表示する

$data .= '<div class = "public-file-names" ><a href="'.$path .'xmluploads/'. $foldnames .'/'. $filenames.'" target="_blank" download>' ."--". $filenames .'</a><br></div>'; 

div.public-file-names { 


    background: transparent url("../images/close-cross.jpg") no-repeat scroll right center; 
    font-size: 14px; 
    margin: 10px 0; 
    } 

Answer 1

を使用してお手伝いをしたい場合は、デための別のアンカータグを追加する必要が知っている場合白いボタンを押し、背景イメージをタグに移動します。

$data .= '<div class = "public-file-names" ><a href="'.$path .'xmluploads/'. $foldnames .'/'. $filenames.'" target="_blank" download>' ."--". $filenames .'</a><br><a href="" class="delete-button"></a></div>'; 

.public-file-names { 
    font-size: 14px; 
    margin: 10px 0; 
} 

.delete-button { 
    float: right; 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    background: transparent url("../images/close-cross.jpg") no-repeat scroll right center; 
} 

Answer 2

を使用していますが、それは、HTML

によって達成することができるあなたは自分の.public-ファイル名のそれぞれが、中にdivをラップすることができタグ

<a href="your-link.html"> 
    <div class="public-file-names"> 

    </div> 
</a> 

<a href="your-link.html"> 
    <div class="public-file-names"> 

    </div> 
</a> 

<a href="your-link.html"> 
    <div class="public-file-names"> 

    </div> 
</a> 

あなたのためにそれdoesntの仕事は、私はあなたが私はjQueryの