如何使用媒体查询来悬停元素？

Question

我的问题是，当我尝试使用媒体查询来悬停某个元素（例如导航栏中的可点击链接）时，它仍在使用该新设置规则，但它也会应用普通浏览器中给出的规则。

例如：

'use strict';
const bcrypt = require('bcryptjs');
const models = require('../models');
const User = models.User;
module.exports = {
    up: async (queryInterface, Sequelize) => {
        queryInterface.bulkInsert('Users', [{
            firstName: 'sameer',
            lastName: 'manek',
            email: 'sameermanek@hotmail.com',
            password: bcrypt.hashSync('poochies', 8),
            type: 'admin',
            createdAt: new Date(),
            updatedAt: new Date()
        }], {});

        const user = await User.findOne({
            where: {
                type: 'admin',
                email: 'sameermanek@hotmail.com'
            },
        });

        return await queryInterface.bulkInsert('Admins', [{
            id: user.id,
            phone: '+919409662665',
            status: true,
            createdAt: new Date(),
            updatedAt: new Date()
        }], {});
    },
    down: async (queryInterface) => {
        await queryInterface.bulkDelete('Admins', null, {});
        await queryInterface.bulkDelete('Users', null, {});
    }
};

让我告诉您结果：

所以现在您可以看到，它结合了两个规则，但是我所期望的是，当浏览器大小小于700px时，导航链接仅使用@media块中给出的规则。请问有什么帮助，我非常感谢！

Answer 1

保留相同的选择器。 在这两种情况下，都有“ a：hover”或“ li：hover a”。

编辑： 现在，在最大宽度600px上，您将同时应用这两个规则，它们不会彼此覆盖。

Answer 2

针对每个媒体查询指定相同的元素

在每个媒体查询上定位相同的元素，以获得您想要的结果。

 nav ul li a:hover {
  border:0;
  background-color:green;
  color:yellow;
  border-radius: 26px;
  padding: 60px 10px;
 }

 @media screen and (max-width: 700px) {
  nav ul li a:hover {
   background-color: black;
   width: 100%;
   border-radius: 20px;
 }
}