lideo/css-testing-hover-and-pointer-features.markdown

## css-testing-hover-and-pointer-features.markdown

      
    Raw
  

              css-testing-hover-and-pointer-features.markdown
            
          
    CSS: testing hover and pointer features

https://www.w3.org/TR/mediaqueries-4/
https://css-tricks.com/touch-devices-not-judged-size/
A Pen by lideo on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pointer detection test</title>
</head>
<body>
  <h1>Hover me... if you can</h1>
</body>
</html>

## style.css
h1 {
  cursor: pointer;
}
h1:hover {
  color: red;
}
h1:after {
  content: '\2191';
  margin-left: .5em;
}

@media (hover: none) and (pointer: coarse) {
  h1:after {
    content: '\274C';
    margin-left: .5em;
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Pointer detection test</title>
	</head>
	<body>
	<h1>Hover me... if you can</h1>
	</body>
	</html>
	h1 {
	cursor: pointer;
	}
	h1:hover {
	color: red;
	}
	h1:after {
	content: '\2191';
	margin-left: .5em;
	}

	@media (hover: none) and (pointer: coarse) {
	h1:after {
	content: '\274C';
	margin-left: .5em;
	}
	}