CSS - 在锚点内更改div的border-color：hover

Question

我有一个div包含在一个锚中，如下所示：

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

我想要它，以便当您将鼠标悬停在<a>上时，子<div>的边框颜色会发生变化。我知道你可以像这样简单地为div做这件事：

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

但是当我将鼠标悬停在文本上时，我希望它能够改变

Answer 1

这是你想要的事吗？

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

希望这会有所帮助。

Answer 3

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

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

Answer 4

请尝试以下操作： Demo

当你为div提供边框时，它是一个块级元素，所以使用它作为内联块或使用这样的跨度

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

的CSS：

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

}