Effect How to - Hover to hide label








Question

We would like to know how to hover to hide label.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
label.error {<!-- ww w  . j  av a2 s.com-->
  position: absolute;
  top: 20%;
  left: 20%;
  z-index: 100;
  background: #FFF;
  border: 1px solid #FF0000;
  font-size: 10pt;
  width: 280px;
  padding: 2px;
}

label.error:hover {
  opacity: 0;
}
</style>
</head>
<body>
<body>
  <span id="test">some text...</span>
  <label class="error"> Some error </label>
</body>
</body>
</html>

The code above is rendered as follows: