daily pastebin goal
62%
SHARE
TWEET

Untitled

a guest Feb 20th, 2019 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. #panel {
  2.                 position: fixed;
  3.                 top: 0px;
  4.                 right: 20%;
  5.                 bottom: 0px;
  6.                 background: snow;
  7.             }
  8.             .contact {
  9.                 background: skyblue;
  10.                 position: relative;
  11.                 height:50px;
  12.             }
  13.             .std {
  14.                 width: 80px;
  15.             }
  16.             .vtl {
  17.                 position: absolute;
  18.                 background: red;
  19.                 display: none;
  20.                 left:-153px;
  21.                 margin-top:-35px;
  22.                 width: 150px;
  23.                 height: 50px;
  24.             }
  25.             .vtl:after {
  26.                 content: ' ';
  27.                 height: 0;
  28.                 position: absolute;
  29.                 width: 0;
  30.                 border: 10px solid transparent;
  31.                 border-left-color: red;
  32.                 left: 100%;
  33.                 top: 10px;
  34.             }
  35.             .contact:hover .vtl {
  36.                 display: block;
  37.             }
  38.    
  39. <div id="panel">
  40.             <div class="contact">
  41.                 <div class="std">
  42.                     Hover me!
  43.                 </div>
  44.                 <div class="vtl">
  45.                     tools
  46.                 </div>
  47.             </div>
  48.             <div class="contact">
  49.                 <div class="std">
  50.                     Hover me!
  51.                 </div>
  52.                 <div class="vtl">
  53.                     tools
  54.                 </div>
  55.             </div>
  56.             <div class="contact">
  57.                 <div class="std">
  58.                     Hover me!
  59.                 </div>
  60.                 <div class="vtl">
  61.                     tools
  62.                 </div>
  63.             </div>
  64.  
  65.  
  66.                     ......
  67.  
  68.                 </div>
  69.    
  70. <div id="panel">
  71.   <div class="contact">
  72.     <div class="std">
  73.      Hover me!
  74.     </div>
  75.     <div class="vtl">
  76.      tools
  77.     </div>
  78.   </div>
  79. </div>
  80.    
  81. #panel {
  82.   position: fixed;
  83.   top: 0px;
  84.   right: 20%;
  85.   bottom: 0px;
  86.   background: snow;
  87.   width:260px;
  88.   overflow: auto;
  89. }
  90. .contact {
  91.   background: skyblue;
  92.   position: relative;
  93.   height:50px;
  94. }
  95. .std {
  96.   width: 80px;
  97.   float:right;
  98. }
  99. .vtl {
  100.   position: absolute;
  101.   background: red;
  102.   display: none;
  103.   width: 150px;
  104.   margin-left:10px;
  105.   margin-top:-10px;  
  106.   height: 50px;
  107. }
  108. .vtl:after {
  109.   content: ' ';
  110.   height: 0;
  111.   position: absolute;
  112.   width: 0;
  113.   border: 10px solid transparent;
  114.   border-left-color: red;
  115.   left: 100%;
  116.   top: 10px;
  117. }
  118. .contact:hover .vtl {
  119.   display: block;
  120. }​
  121.    
  122. #panel {
  123.             position: absolute;
  124.             top: 0px;
  125.             right: 20%;
  126.             bottom: 0px;
  127.             background: snow;
  128.  
  129.         }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top