英文:
how to set border-color of parent elementsame as the color of child element when hover over that child,
问题
这是HTML结构的翻译：
<div class="parent">
<div class="child1" style="background: red;"></div>
<div class="child2" style="background: blue;"></div>
</div>
要使.parent元素在悬停在.child1上时的边框颜色为红色，在悬停在.child2上时的边框颜色为蓝色，只使用CSS，可以尝试以下代码：
.child1:hover + .parent {
border-color: red;
}
.child2:hover + .parent {
border-color: blue;
}
希望这能帮助你实现所需的效果。
英文:
this is structure of html
<div class="parent">
<div class="child1" style="background: red;"></div>
<div class="child2" style="background: blue;"></div>
</div>
i want to make border-color of .parent element red when i hover over .child1 and blue when i hover over .child2
using only CSS.
is it possible.
i am new to web, so i ask on chatGPT. it produce some garbage code that didn't work.
.parent:hover {
border-color: red;
}
.child1:hover ~ .parent {
border-color: blue;
}
.child2:hover ~ .parent {
border-color: green;
}
答案1
得分: 2
我终于得到了我的答案。
:has()解决了我的问题。
这是css代码
.parent:has(.child1:hover){
border-color: red;
}
.parent:has(.child2:hover){
border-color: blue;
}
这是我正在工作的页面。
codePen链接: https://codepen.io/manoj1310/pen/WNaxRqa
英文:
finally i got my answer.
:has() solved my problem.
here is the css code
.parent:has(.child1:hover){
border-color: red;
}
.parent:has(.child2:hover){
border-color: blue;
}
here is the page that i was working on.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论