CSS-在anchor：hover中更改div的邊框顏色

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

嘗試這樣： 演示

當您為div提供邊框時，它是一個塊級元素，因此可以將其用作內嵌塊或使用跨度，例如

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

CSS：

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

}