title: how to i only use hover for web and active for mobile devices for css
body: <p>how to i only use hover for web and active for mobile devices for css?</p>
  <p>for web/desktop</p>
  <pre><code>      @media only screen and (max-width: 1400px) {
          &amp;:hover {
            .post_wrapper {
              opacity: 0.1;
            }
            .post_description {
              opacity: 1;
            }
          }
        }
  </code></pre>
  <p>for mobile</p>
  <pre><code>      @media (max-device-width: 1400px) {
          &amp;: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;
            }
          }
        }
  </code></pre>