如何解决Html 元素悬停以更改其他元素样式不起作用
body {
background: black;
}
.text-menu {
font-size: 1.5em;
transition: .5s;
margin-bottom: 1rem;
color: white;
}
.m-1:hover~.m-3 {
opacity: .4;
color: red;
}
.m-1:hover~.m-2 {
opacity: .4;
color: red;
}
.m-2:hover+.m-1 {
opacity: .4;
color: red;
}
.m-2:hover~.m-3 {
opacity: .4;
color: red;
}
.m-3:hover~.m-2 {
opacity: .4;
color: red;
}
.m-3:hover~.m-1 {
opacity: .4;
color: red;
}
<div class="text-menu m-1">Rreth nesh</div>
<div class="text-menu m-2">Shërbimet</div>
<div class="text-menu m-3">Na Kontaktoni</div>
我正在尝试设置一个带有创建链接的菜单,我希望当我悬停特定链接时,其他链接的不透明度为 0.6 变得不那么重要,并且焦点转到悬停项目。但我这样做有问题吗?
解决方法
从您在选择器中已经到达的任何给定点来看,没有向后或向上的方向,因此不幸的是,仅靠 CSS 无法实现您想要做的事情。
使用一点点 Javascript 很容易:
const menuContainer = document.querySelector('.menu-container');
const menuItems = menuContainer.querySelectorAll('.text-menu');
menuContainer.addEventListener('mouseover',f);
menuContainer.addEventListener('mouseleave',f);
function f(event) {
for (const menuItem of menuItems) {
menuItem.classList.toggle('inactive',event.target !== menuItem && event.target !== event.currentTarget)
}
}
body {
background: black;
}
.text-menu {
font-size: 1.5em;
transition: .5s;
margin-bottom: 1rem;
color: white;
}
.inactive {
opacity: .4;
color: red;
}
<div class="menu-container">
<div class="text-menu">Rreth Nesh</div>
<div class="text-menu">Shërbimet</div>
<div class="text-menu">Na Kontaktoni</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。