how to i only use hover for web and active for mobile devices for css

Question

how to i only use hover for web and active for mobile devices for css?

for web/desktop

      @media only screen and (max-width: 1400px) {
        &:hover {
          .post_wrapper {
            opacity: 0.1;
          }
          .post_description {
            opacity: 1;
          }
        }
      }

for mobile

      @media (max-device-width: 1400px) {
        &:active {
          box-shadow: 
          inset 7px 7px 15px rgba(55, 84, 170,.15),
          inset -7px -7px 20px rgba(255, 255, 255,1),
          0px 0px 4px rgba(255, 255, 255,.2);
          .post_wrapper {
            opacity: 0.1;
          }
          .post_description {
            opacity: 1;
          }
        }
      }