如何解决使用:hover修改另一个类的CSS?
目前,这在CSS中是不可能的,除非您要选择一个子元素或同级元素(这很重要,并在此处的其他答案中进行了描述)。
对于所有其他情况,您将需要JavaScript。jQuery和Angular等框架可以相对轻松地解决此问题。
[编辑]
使用新的CSS(4)选择器:has(),您将能够定位父元素/类,从而在不久的将来使仅CSS解决方案成为可能!
解决方法
当仅使用css将鼠标悬停在另一个类的元素上时,是否可以修改一个类的css?
就像是:
.item:hover .wrapper { /*some css*/ }
只有“包装器”不在“项目”内部,而是在其他地方。
我真的不想在简单的事情上使用javascript,但是如果必须的话,我该怎么做?这是我失败的尝试:
document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";
每个班级只有一个要素。不知道为什么他们在制作模板时不使用ID,但这就是事实,我无法更改。
[编辑]
这是一个菜单。每个菜单元素都有一个不同的类。当您将鼠标悬停在元素上时,会在右侧弹出一个子菜单。这就像一个覆盖层,当我使用“检查元素”工具时,可以看到子菜单处于活动状态时整个网站html都发生了变化(这意味着子菜单什么也没有)。我称之为“包装器”的类具有控制子菜单背景的css。我确实看不到这两个类之间的联系。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。