CSS-在anchor：hover中更改div的边框颜色

Question

I have a div contained within an anchor like so:

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

I want it so that when you hover over the <a> , the border-color of the child <div> changes. I know you can do it simply for the div like so:

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

But I want it to change when you hover over the text also

Answer 1

Is this the sort of thing you're after?

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

https://jsfiddle.net/d7tc0sq8/

Answer 2

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


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

Hope this will help.

Answer 3

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

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

Answer 4

Try like this: Demo

As you are giving border for div, its a block level element, so use it as inline-block or use span like this

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

css:

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

}