CSS - Change border-color of div within anchor:hover

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

You need to understand that div is a block element and anchor is an inline element. What you doing is unnatural and unnecessary... Put a span in the anchor or just style it but itself — felix91, Nov 07 '16 at 10:05
http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — Jose Rui Santos, Nov 07 '16 at 10:07

score 1 · Accepted Answer · answered Nov 07 '16 at 10:10

1

Is this the sort of thing you're after?

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

answered Nov 07 '16 at 10:10

Andy Holmes

score 1 · Answer 2 · answered Nov 07 '16 at 10:46

1

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


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

Hope this will help.

answered Nov 07 '16 at 10:46

Mohamed dev

score 0 · Answer 3 · answered Nov 07 '16 at 10:10

0

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

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

answered Nov 07 '16 at 10:10

felix91

score 0 · Answer 4 · answered Nov 07 '16 at 10:12

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;

}

4 Answers4