User:Eleanorg/1.2/Forbidden Pixels/css pop-ups

From XPUB & Lens-Based wiki

CSS hover reveals a 'popup' which shows information about the pixel hovered on. jQuery reveals the colour of that pixel (td) at the same time. 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="jquery-1.5.2.min.js"></script>
    <style type="text/css">
    body {
      background-color: #333;
    }
    
    .pixel {
      width: 100px;
      height: 100px;
      border: 1px solid #ddd;
      background-color: #d00;
    }
    
    /* pixel class 'hidden' is removed on hover to show bg colour */
    .hidden {
      background-color: transparent;
    }
    
    /* .popup span is hidden by default; appears when its parent td is hovered on */
    .popup {
      display: none;
    }
    
    td:hover span.popup {
     position: absolute;
     display:block;
     z-index:100;
     left: 30px;
     
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
      border-radius: 20px;
     
     
     opacity:0.9;
     padding:10px;
     background:#F0F0F0 none repeat scroll 0 0;
     
     font-family:serif;
     font-size:14px;
         
    }
    </style>
  </head>
  
<body>
<table>
<tr>
<td class="pixel hidden"><span class="popup">Some info to see on hover!</span></td>
</table>
<!-- javascript to remove the 'hidden' class from td on hover, revealing bg colour -->
<script>
    (function() {
      var td = $('td');
      $(td).mouseover(function(){
        console.log('hello');
        $(this).removeClass('hidden');          
      });
    })();
    (function() {
      var td = $('td');
      $(td).mouseout(function(){
        console.log('goodbye');
        $(this).addClass('hidden');          
      });
    })();
 
  </script>
</body>

</html>
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Eleanorg/1.2/Forbidden_Pixels/css_pop-ups&oldid=26080"