Problem specification

Development reactjs – player (github.com/goblin-labo…). The progress bar tooltipe does not automatically disappear

Cause analysis,

After testing, on a touch device, after the element is touched, it enters the :hover state, it does not exit the hover state, it needs to wait for other elements to be touched before it exits again. You’ve seen in Resources that the hover and Pointer criteria for media queries can be used to solve this problem.

Hover is used to judge whether the device is suitable for hovering or convenient. The value of match between mobile phone and tablet is None; Pointer is used to judge the accuracy of the main input device; the value of match between mobile phone and tablet is coarse (limited precision). The value of match on the PC device is fine (precise pointer)

The solution

  • tooltipeIt is not displayed by default
  • :hoverState,tooltipeAccording to
  • supporthover 和 pointerThe touch screen that meets the media search criteria is not displayed

Reference code:

.tooltip {
  opacity: 0;
}
  
.slider:hover {
  .tooltip {
    opacity: 1; }}// Phone or tablet does not display tooltip
@media (hover: none), (pointer: coarse) {
  .slider:hover {
    .tooltip {
      opacity: 0; }}}Copy the code

compatibility

Reference documents:

  • Finally, a CSS only solution to: hover on touchscreens: blog.usejournal.com/finally-a-c…

  • Interaction Media Features: drafts.csswg.org/mediaquerie…

  • Hover and pointer Media query description: hover-pointer-media-query.glitch.me/

  • Hover | @ media. Hover: cloud.tencent.com/developer/s…

  • Any hovering | @ media. Any – hover: cloud.tencent.com/developer/s…

  • Pointer | @ media. Pointer: cloud.tencent.com/developer/s…

  • Any pointer | @ media. Any – pointer: cloud.tencent.com/developer/s…