如何删除悬停效果

Question

我正在使网站具有响应性，并且对div产生了悬停效果，但是我需要它使用媒体查询断点在移动设备上将其删除 。

    .div{
    margin-bottom: 10px;
    grid-column: 2/4;
    grid-row: 4/5;
    width: 100%;
    height: 61vh;
    display: grid;
    margin-left: -100px;
    margin-right: 100px;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    transition: margin-left .25s;
}

.div:hover{
    margin-bottom: 10px;
    grid-column: 2/4;
    grid-row: 4/5;
    width: 100%;
    height: 61vh;
    display: grid;
    margin-left: -120px;
    margin-right: 100px;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    transition: margin-left .25s;
}


@media screen and (max-width: 800px){



/*----------Here i would like to remove the hover effect--------------*/
}

Answer 1

首先，使div悬停效果仅在大于x像素的屏幕上起作用，像这样

@media screen and (min-width: 768px) {
    div:hover {
        //your code
    }
}

悬停效果仅在大于768像素的更大的屏幕上起作用。