CSS - アンカー内のdivのボーダー色を変更します。私はそうのようなアンカー内に含まれるdiv要素を持っている

Question

を置く：

<a class="chk" href="href"> 
    <div class="chk-div"></div> Text Here 
</a> 

私はそれをしたいあなたは<a>にカーソルを合わせるとなるように、のボーダー色を子供<div>が変更されます。私は、あなたは、単にそのようなdivのためにそれを行うことができます知っている：

.chk-div:hover { 
    border-color: green; 
} 

しかし、私はあなたがテキストの上にカーソルを移動するとき、それは変更する必要も

Answer 1

は、これはあなたが後にしているものの一種であります？あなたはdivの、そのブロックレベル要素の境界線を与えているとしてDemo

ので、インラインブロックや使用スパンなどのそれを使用する：

.chk:hover .chk-div {border: solid 1px green;}

https://jsfiddle.net/d7tc0sq8/

Answer 2

<a class="ckk" href="#"> 
Text Here 
</a> 

.chk {padding:10px; border:1px solid black;} 
.chk:hover{border-color:green;} 

Answer 3

次のように試してみてくださいこの

<a class="chk" href="href"> 
    <span class="chk-div">Text</span> Here 
</a> 

css：

.chk-div:hover { 
    border: 1px solid green; 

} 

Answer 4

<a class="chk" href="href"> 
    <div class="chk-div">Text Here</div> 
</a> 


.chk-div:hover { 
    border: 1px solid green; 
} 

これが役立つことを願っています。