css - JavaScriptを使用せずにこれを達成するにはどうすればよいですか?

Question

サムネイルが表示されたページがあります (さらに増えるので、float:left プロパティが必要です)。サムネイルは Div であり、その中にアンカーがあり、そのアンカーは画像とテキストです。テキストは画像の下にあります。アンチョはpdfファイルにリンクします。単純。

http://www.bridgecitymedical.com/forms

問題は、ホバーするとテキストに下線が引かれ、サム イメージにカーソルを合わせるとサム イメージに境界線が表示され、テキストに下線が引かれることです。私が必要とするのは、テキストまたは画像のいずれかにカーソルを合わせると、それぞれのホバー状態が両方に適用されることです。たとえば、画像に境界線が付けられ、テキストに下線が引かれます。現時点では、それらは単独で機能しますが、1 つにする必要があります。そうしないと、奇妙に見えます。

マークアップは次のとおりです。

<div class="form">
    <a href="/wp-content/uploads/forms/Adolescent New Patient Paperwork.pdf" target="_blank">
        <div class="form-wrapper">
        <div class="form-thumb">
            <img src="/forms/thumbs/1.jpg" alt="" />
        </div>
        Caption
        </div>
    </a>
</div>

そしてCSS...

.form {
    margin: 30px;
    font-size:.8em;
    width: 137px;
    text-align: center;
}
.form-thumb{
    width: 125px;
    height: 150px;
    padding:5px;
    border: 1px solid rgba(0,0,0,.2);
    float:left
}
.form-thumb:hover{
    border: 1px solid #000;
}

デフォルトでは、テキストの下線は、tylesheet の別の部分から取得されます。

JavaScriptなしでこれを行うことはできますか!?

クリスによって解決されました（選択された回答）。これが彼の解決策です、私の親指をフィドルで...

http://jsfiddle.net/7MLjZ/1/