Css 如何移除悬停效果

我正在使一个站点具有响应性，我在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--------------*/
}

---

首先，让div悬停效果只在大于x像素的屏幕上工作，如下所示

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

---

悬停效果仅适用于大于768px的屏幕

首先让div悬停效果只在大于x像素的屏幕上工作，如下所示

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

---

悬停效果仅适用于大于768px的屏幕

显示你的css:hover通常更容易，如果你反转媒体查询，并且只对较大的屏幕大小应用效果，不是吗？（否则，您必须使用另一个：hover规则覆盖/重新设置您不想更改的所有值。）您可以：.div{pointer events:none}或（不推荐）使用jquery，您可以防止默认值，而不是在较小的尺寸上删除它，我将首先仅在较大的尺寸上应用它。查看我的答案。如果你反转媒体查询，并且只对较大的屏幕大小应用效果，那么显示css:hover通常会容易得多，不是吗？（否则，您必须使用另一个：hover规则覆盖/重新设置您不想更改的所有值。）您可以：.div{pointer events:none}或（不推荐）使用jquery，您可以防止默认值，而不是在较小的尺寸上删除它，我将首先仅在较大的尺寸上应用它。看到我的答案了。哦，好吧，我没想过