英文:
CSS style on :hover to another element
问题
当我悬停在<li>上时，我如何选择我的<a>元素？
<a href="#">Link</a>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
a ul:hover {
color: red;
}
英文:
How when I hover on the <li>I can select my <a>element ?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
a ul:hover {
color: red;
}
<!-- language: lang-html -->
<a href="#">Link</a>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
<!-- end snippet -->
答案1
得分: 1
你可以使用 :has 来实现，代码如下：
a:has(+ ul:hover) {
color: red;
}
这段代码会选中包含在链接后的 ul 元素在悬停状态下的情况。
英文:
You can do this using :has like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
a:has(+ ul:hover) {
color: red;
}
<!-- language: lang-html -->
<a href="#">Link</a>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
<!-- end snippet -->
答案2
得分: 0
Sure, here is the translated code portion:
对于那些支持 :has 选择器的浏览器，您可以使用：
<style>
a:has(+ ul li:hover) {
background: red;
}
</style>
<a href="#">链接</a>
<ul>
<li>元素 1</li>
<li>元素 2</li>
</ul>
请注意，在 caniuse.com 上检查是否有足够的支持适用于您的情况 - Edge/Chrome/Safari 支持它，但 Firefox 需要设置一个标志。
英文:
For those browsers which support :has you can use:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<style>
a:has(+ ul li:hover) {
background: red;
}
</style>
<a href="#">Link</a>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
<!-- end snippet -->
However, check on caniuse.com that there is enough support for your use case - Edge/Chrome/Safari support it but Firefox requires a flag to be set.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论