CODEWITHSUNDEEP
javascriptcsshovercross-browser
Luke Aveil
Luke Aveil

Reputation: 19

Removing :hover on mobile devices

I appreciate there are answers to this question but I have yet to find a solution that works for me.

I have a dropdown menu that has styles applied upon :hover, in mobile viewports this shouldn't be applicable for obvious reasons.

The dropdown is structured something like:

<div className={ styles.dropdownWrapper }>
        <span className={ styles.dropdownLabel }>{ label }</span>
        <object className={ styles.dropdownArrow }></object>
        <div className={ styles.dropdownOptions }>
            <div className={ styles.dropdownItem }>
                <span>Settings</span>
            </div>
            <div className={ styles.dropdownItem }>
                <span onClick={ () => console.log("logout") }>Logout</span>
            </div>
        </div>
    </div>

With styling:

.dropdownWrapper {
  display: flex;
  height: 100%;
  align-items: center;
  cursor: pointer;
}

.dropdownOptions {
  display: none;
}

.dropdownItem {
  padding: 0.4em;
}

.dropdownItem hr {
  border: 0;
  height: 1px;
  background: #979797;
  margin: 0;
}

.dropdownWrapper:hover .dropdownOptions {
  top: 100%;
  display: block;
  position: absolute;
  padding: 1em 1em 0.5em 1em;
  background-color: #36394f;
  border-radius: 2px;
  min-width: 100px;
}

.dropdownArrow {
  padding-left: 0.5em;
  height: 24px;
  width: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: inline("./downArrow.svg");
}

@media only screen and (max-width: 768px) {
  .dropdownOptions {
    display: block;
    position: relative;
  }

  .dropdownArrow, .dropdownHr {
    display: none;
  }
}

The above code functions as it should in Firefox desktop and mobile, Chrome desktop but not mobile. The problem is that the onClick() is not fired because the :hover appears to be retained and is causing the dropdown items to be "hidden".

I previously found this solution but this is now depreciated in Firefox desktop.

My next solution was to update the css as follows:

@media (hover: hover) {
  .dropdownWrapper:hover .dropdownOptions {
    top: 100%;
    display: block;
    position: absolute;
    padding: 1em 1em 0.5em 1em;
    background-color: #36394f;
    border-radius: 2px;
    min-width: 100px;
  }
}

Which fixes the Chrome mobile issue but does not work in Firefox desktop.

Any pointers would be greatly appreciated!

Upvotes: 0

Views: 176

Answers (2)

WebCoder
WebCoder

Reputation: 62

@media only screen and (min-width: 769px) { 
 .dropdownWrapper:hover .dropdownOptions {
  top: 100%;
  display: block;
  position: absolute;
  padding: 1em 1em 0.5em 1em;
  background-color: #36394f;
  border-radius: 2px;
  min-width: 100px;
 }
}

Try add this code :)

Upvotes: 0

Alex Mougenet
Alex Mougenet

Reputation: 233

You should consider using a mobile-first strategy. It consists in applying CSS rules to mobile devices, and overwrite them (or add some) for larger screens.

This way, you should define your CSS rules for mobile devices, then use a media query to target larger screens

@media only screen and (min-width: 769px) { }

Upvotes: 1

Related Questions