Issue with setting a transparent hover on @media CSS query

Question

I have a sidebar, and when scrolling on the sidebar using mobile, I would like only scrolling to be possible, and not hovering. I've taken this approach (a CSS-only solution!), based on answers I've seen previously:

  /* default hover class on list items*/
  ul li:hover .check {
  border: 4px solid #FFFFFF;
}

/* default hover class on list items when checked*/
ul li:hover .check {
border: 4px solid #FFFFFF;
}


/* for mobile, set hover-color on list items to be same as un-hovered list items --THIS IS WORKING*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover label {
    color: #AAAAAA;
    background: transparent;
  }
}

/* for mobile, set hover-color on checkmark items to be same as un-hovered checkmark items -- THIS IS NOT WORKING, this color is not applied to the checkbox*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover .check{
    color: #AAAAAA;
    background: transparent;
  }
}

/* catch-all - set hover color on all list items to be same as un-hovered*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover {
    color: #AAAAAA;
    background: transparent;
  }
}

The issue is that the @media query doesn't recognize the ul li:hover .check. The @media query for ul li:hover label works perfectly. I'm not sure why this is. How can I make this work?

What's your HTML look like?

jsea
– jsea

2019-10-23 07:55:43 +00:00
Commented Oct 23, 2019 at 7:55 — jsea
– jsea, Commented Oct 23, 2019 at 7:55

Brett Parsons · Accepted Answer · 2019-10-24 00:49:42Z

5

+25

Put all of your hover styles in this media query -

@media screen and (hover: hover) {
  //styles go here
}

This will only allow the hover styles if the device supports hovering. Mobile will obviously not support hovering.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

This is way cleaner than trying to override styles.

answered Oct 24, 2019 at 0:49

Brett Parsons

4544 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Tiwari · Accepted Answer · 2019-11-21 06:14:48Z

3

Probably a good starting point would be to look at

@media(hover:hover) and (pointer: coarse){
    //your media query css properties
}

The primary input mechanism can conveniently hover over elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

edited Nov 21, 2019 at 6:14

answered Oct 22, 2019 at 3:02

Shubham Tiwari

7131 gold badge6 silver badges19 bronze badges

Comments

claw68 · Accepted Answer · 2019-10-07 06:13:13Z

0

Have you tried using the hover of the checkmark instead of the li?

@media all and (min-width:320px) and (max-width: 960px) {
    ul li .check:hover {
    color: #AAAAAA;
    background: transparent;
  }
}

answered Oct 7, 2019 at 6:13

claw68

3743 silver badges10 bronze badges

1 Comment

DiamondJoe12 Over a year ago

This issue is solved; by using border: 4px solid #AAAAAA; I was trying to set the color to transparent, but the object is a circle, and so border needed to be specified.

wbq · Accepted Answer · 2019-10-29 03:06:53Z

Some notes on your css.

Did you realize that you're making the same statement twice here:

/* default hover class on list items*/
ul li:hover .check {
  border: 4px solid #FFFFFF;
}

/* default hover class on list items when checked*/
ul li:hover .check {
border: 4px solid #FFFFFF;
}

You could combine all media queries to one, meaning put all the classes in one media query like so:

@media all and (min-width:320px) and (max-width: 960px) {

ul li:hover label {
    color: #AAAAAA;
    background: transparent;
  }

ul li:hover .check{
    color: #AAAAAA;
    background: transparent;
  }

ul li:hover {
    color: #AAAAAA;
    background: transparent;
  }

}

Do you want to edit the font-color of a checkbox? Your comment sounds like it:

  /* for mobile, set hover-color on checkmark items to be same as un-hovered checkmark items -- THIS IS NOT WORKING, this color is not applied to the checkbox*/

And eventually an answer to your question, assuming you have the following HTML:

<div id="wrap_all">
        <ul>
            <li>
                <input type='checkbox' />
                <label>item 1</label>
            </li>
            <li>
                <input type='checkbox' />
                <label>item 2</label>
            </li>
            <li>
                <input type='checkbox' />
                <label class="check">item 3</label>
            </li>
            <li>
                <input type='checkbox' />
                <label>item 4</label>
            </li>
        </ul>
    </div>

I believe you can achieve what you want with this:

#wrap_all {
  display: flex;
  width: 100%;
  height: 60vh;
  justify-content: center;
  align-items: center;
  background: #191919;
}

ul {
  list-style:none;
  display:flex;
  flex-direction:column;
}

ul li {
  color: #ff5f00;
  margin-bottom: 5px;
  border-bottom: 4px solid transparent;
  padding:4px;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

/* default hover class on list items*/
ul li:hover label {
  border-bottom: 1px solid #f5f5f5;
  color:#f5f5f5;
}

/* default hover class on list items when checked*/
ul li:hover .check {
  border-bottom: 4px solid #ff5f00;
}


@media all and (min-width: 320px) and (max-width: 960px) {

  ul li:hover label {
    color: #ff5f00;
    background: transparent;
    border-bottom: none;
  }


  ul li:hover .check {
    color: #AAAAAA;
    background: transparent;
  }


  ul li:hover {
    color: #ff5f00;
    background: transparent;
  }

}

Hope this helps, codepen here: https://codepen.io/webnique/pen/vYYJrbV

Collectives™ on Stack Overflow

Issue with setting a transparent hover on @media CSS query

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related