How to make click effect in mobile with pure css-CodePudding

Hey guys I'm a newbie to html and css. I'm trying to make mobile effect even though I have css effect for desktop. I want to make "if someone click the section in mobile, change the background color to f5f5dc". My current code is...

.section2 {
  height : auto;
  transition :0.2s;
  margin : 0.5em 0em 0.5em 0em;
  padding: 10px;
  background-color: #ffffff;
  border: 0.1px solid #302f2f34;
}
@media (hover: hover) { /* disable the effect on mobile phone */
  .section2:hover {
    transition :0.2s;
    transform: translate(2%, 0%);
    background-color: rgba(248, 123, 21, 0.264);
    cursor: pointer; } 
}

I know it would be easy if I use jQuery but I don't want to use jQuery... and is there a way to make the effect with pure css?

CodePudding user response：

The @media rule is for setting the min/max breakpoints to where the following rules should apply. You can read about it here.

To answer your question, to style an element only when it's clicked you may use the :active pseudo-selector. Like this:

.section2:active {
  background-color: tomato;
}

CodePudding user response：

You can sort of "cheat" it using tabindex and the :focus on your @media query.

.section2 {
  height: auto;
  transition: 0.2s;
  margin: 0.5em 0em 0.5em 0em;
  padding: 10px;
  background-color: #ffffff;
  border: 0.1px solid #302f2f34;
}

.section2:hover {
  transition: 0.2s;
  transform: translate(2%, 0%);
  background-color: rgba(248, 123, 21, 0.264);
  cursor: pointer;
}

@media only screen and (max-width: 600px) {
  .section2:focus {
    transition: 0.2s;
    transform: translate(2%, 0%);
    background-color: rgba(248, 123, 21, 0.264);
    cursor: pointer;
  }
}

<div  tabindex="0">
</div>