'How to make click effect in mobile with pure css

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?

csshoverclick


Solution 1:[1]

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 class="section2" tabindex="0">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AStombaugh

Related Questions