覆盖物品而无法访问

Question

我创建一个全屏幕的导航

该导航按钮上点击打开。问题是，li和close按钮不可访问。我无法点击它们。

的Html

<div id="myNav" class="overlay"> 
     <v-btn class="white--text closebtn" icon v-on:click.prevent="CloseDialog"> 
     <v-icon>cancel</v-icon> 
     </v-btn> 
     <div class="overlay-content"> 
     <a href="#">About</a> 
     <a href="#">Services</a> 
     <a href="#">Clients</a> 
     <a href="#">Contact</a> 
     </div> 
    </div> 

的CSS

.overlay { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 4; 
    top: 0; 
    left: 0; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-x: hidden; 
    transition: 0.5s; 
} 

.overlay-content { 
    z-index :99; 
    position: relative; 
    top: 25%; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
} 

.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
    color: #f1f1f1; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 40px; 
    right: 55px; 
    font-size: 80px; 
    cursor :pointer 
} 

@media screen and (max-height: 450px) { 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
    font-size: 40px; 
    top: 15px; 
    right: 35px; 
    } 
} 

Javscript

<script> 
import { mapGetters } from "vuex" 
export default { 
    computed: mapGetters({ isLoggedIn: 'CheckAuth', items: 'GetItems' }), 
    data() { 
    return { 
     clipped: true, 
     drawer: true, 
     fixed: false, 
     miniVariant: true, 
     right: true, 
     rightDrawer: false, 
     title: 'Vuetify.js' 
    } 
    }, 
    methods: { 
    Login() { 
     this.$store.dispatch('ChangeAuth'); 
    }, 
    OpenDialog() { 
     document.getElementById("myNav").style.width = "100%"; 
    }, 
    CloseDialog() { 
     document.getElementById("myNav").style.width = "0%"; 
    } 

    } 
} 
</script> 

Answer 1

这是一个纯粹的CSS问题。您可以在伪元素之后添加：使用它创建背景。或者，您可以在叠加元素上使用pointer-events: none; CSS属性。