JavaScriptを使用せずにこれを行うにはどうすればよいですか？

Question

サムネイルが付いたページがあります（これ以上来るので、float：leftプロパティが必要です）。サムネイルはDivであり、その中にアンカーがあり、そのアンカーはイメージとテキストです。テキストはイメージの下にあります。 anchoはpdfファイルにリンクしています。シンプル。

http://www.bridgecitymedical.com/forms

問題は、あなたがそれにカーソルを合わせると、テキストがホバーに下線取得し、親指の画像が境界線を取得し、あなたが親指の画像にカーソルを合わせると、テキストに下線をされることをです。私が必要とするのは、テキストまたは画像のいずれかにカーソルを合わせると、それぞれのホバー状態に適用されます。イメージは枠線を取得し、テキストには下線が引かれます。現時点では、彼ら自身で機能しますが、それらは1つである必要があります。テキスト下線は、デフォルトではtylesheetの別の部分から来て

.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; 
} 

...

<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：

は、ここでのマークアップです。

javascriptなしでこれを行うことはできますか？

Chris（選択された回答）によって解決されました。ここでフィドルの私の親指で彼の解決策は、

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

Answer 1

ではなく.form-wrapperに:hover状態を使用して...です。

<div class='wrap'> 
    <div class='thumb'></div> 
    Text! 
</div> 



.wrap{width:60px; height:80px;} 
.thumb{width:60px; height:60px; background-color:blue;} 
.wrap:hover{text-decoration:underline;} 
.wrap:hover .thumb{border:5px solid black;} 

http://jsfiddle.net/7MLjZ/

Answer 2

これは推移したときに黒画像のdiv要素の境界線とキャプションのテキストの両方を作るために動作するはずです：

.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:hover .form-wrapper .form-thumb { 
    border: 1px solid #000; 
} 

a:hover { 
    color:#000; 
}