实际上,我正在Vue中构建一个CSS主菜单,当鼠标悬停时它工作正常,当鼠标移出时它会弹出,而隐藏,但我如何也可以隐藏菜单时,单击“一个”超链接?我已经试过了“。菜单a:活动{显示:none; }",但失败。第一个
cngwdvgl1#
.menu a:active { display: none; }只有在按下鼠标按钮直到释放它时才起作用。不幸的是,您不能使用纯CSS实现这个想法。我建议您在单击时添加额外的类,例如:
.menu a:active { display: none; }
.hidden { display: hidden; }
但是您必须使用JavaScript。
t98cgbkg2#
在我看来,我认为你有一个非常强大的工具,但你正在使用它。Vue.js可以毫不费力地完成你想要的任务。
<script setup> import { ref } from 'vue' const showMenu = ref(false) const ToggleMenu = () => { showMenu.value = !showMenu.value } </script> <template> <div class="main"> <button @click="ToggleMenu">Main Menu Title</button> <div v-if="showMenu" class="menu"> <a>Sub Menu Title</a> </div> </div> </template> <style> .menu a { display: block; } </style>
2条答案
按热度按时间cngwdvgl1#
.menu a:active { display: none; }
只有在按下鼠标按钮直到释放它时才起作用。不幸的是,您不能使用纯CSS实现这个想法。我建议您在单击时添加额外的类,例如:但是您必须使用JavaScript。
t98cgbkg2#
在我看来,我认为你有一个非常强大的工具,但你正在使用它。Vue.js可以毫不费力地完成你想要的任务。