Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src='http://tristen.ca/hoverintent/dist/hoverintent.min.js'></script>
​
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
​
<body>
  <div style="padding:100px;">
    <ul class='examples'>
      <li id='first'>
        Trigger
      </li>
      <li id='second'>
        hoverintent
        <span class='popup'>Hi there</span>
      </li>
    </ul>
  </div>
</body>
  
</html>
 
body {
  background:#1BBAEC;
  font:bold 18px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 800px;
  color:#fff;
  margin:0; padding:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  }
ul { margin:0; padding:0; list-style:none; }
a {
  color:#8cdcf5;
  text-decoration:none;
  text-shadow:none;
  -webkit-transition:color 100ms linear;
     -moz-transition:color 100ms linear;
       -o-transition:color 100ms linear;
          transition:color 100ms linear;
  }
  a:hover {
    color:#fff;
    }
​
.fixed-700 {
  display:block;
  width:700px;
  margin:80px auto;
  }
.intro {
  display:block;
  padding:0 10px;
  margin:0 0 80px;
  font-size:27px;
  line-height:38px;
  color:#0e6681;
  text-shadow:0 1px 0 rgba(255,255,255,0.20);
  }
​
  .examples li {
    background:#10A1CF;
    text-align:center;
    display:inline-block;
    width:210px;
    height:20px;
    padding:30px 0 40px;
    margin:0 10px;
    position:relative;
    cursor:pointer;
    -webkit-border-radius:10px;
            border-radius:10px;
    }
​
.popup {
  display:none;
  border:1px solid #ccc;
  background:#000;
  z-index:1000;
  position:absolute;
  left:50%;
  bottom:95px;
  width:170px;
  margin-left:-105px;
  border:none;
  padding:20px;
  font-size:22px;
  -webkit-animation-duration:500ms;
     -moz-animation-duration:500ms;
       -o-animation-duration:500ms;
          animation-duration:500ms;
  -webkit-animation-fill-mode:both;
     -moz-animation-fill-mode:both;
       -o-animation-fill-mode:both;
          animation-fill-mode:both;
  -webkit-box-shadow:0 4px 8px rgba(0,0,0,0.25);
          box-shadow:0 4px 8px rgba(0,0,0,0.25);
  -webkit-border-radius:4px;
          border-radius:4px;
  }
  .popup:after {
    top:100%;
    border:solid transparent;
    content:'';
    height:0;
    width:0;
    left:50%;
    position:absolute;
    pointer-events:none;
    border-top-color:#000;
    border-width:14px;
    margin-left:-14px;
    }
​
.on .popup {
  display:block;
  -webkit-animation-name:fadeInUp;
       -moz-animation-name:fadeInUp;
         -o-animation-name:fadeInUp;
            animation-name:fadeInUp;
  }
.off .popup {
  display:block;
  -webkit-animation-name:fadeInUpOut;
       -moz-animation-name:fadeInUpOut;
         -o-animation-name:fadeInUpOut;
            animation-name:fadeInUpOut;
  }
​
/*On Fade in*/
@-webkit-keyframes fadeInUp {
    0%    { opacity:0; -webkit-transform:translateY(20px); }
    100%  { opacity:1; -webkit-transform:translateY(0); }
  }
@-moz-keyframes fadeInUp {
  0%    { opacity:0; -moz-transform:translateY(20px); }
    100%  { opacity:1; -moz-transform:translateY(0); }
  }
@-o-keyframes fadeInUp {
    0%    { opacity:0; -o-transform:translateY(20px); }
    100%  { opacity:1; -o-transform:translateY(0); }
  }
@keyframes fadeInUp {
    0%    { opacity:0; transform:translateY(20px); }
    100%  { opacity:1; transform:translateY(0); }
  }
​
/*On Fade out*/
@-webkit-keyframes fadeInUpOut {
    0%    { opacity:1; -webkit-transform:translateY(0); }
    50%   { opacity:0.75; -webkit-transform:translateY(-15px); }
    100%  { opacity:0; -webkit-transform:translateY(-15px); }
  }
@-moz-keyframes fadeInUpOut {
  0%    { opacity:1; -moz-transform:translateY(0); }
    50%   { opacity:0.75; -moz-transform:translateY(-15px); }
    100%  { opacity:0; -moz-transform:translateY(-15px); }
  }
@-o-keyframes fadeInUpOut {
    0%    { opacity:1; -o-transform:translateY(0); }
    50%   { opacity:0.75; -o-transform:translateY(-15px); }
    100%  { opacity:0; -o-transform:translateY(-15px); }
  }
@keyframes fadeInUpOut {
    0%    { opacity:1; transform:translateY(0); }
    50%   { opacity:0.75; transform:translateY(-15px); }
    100%  { opacity:0; transform:translateY(-15px); }
  }
​
 
$( document ).ready(function() {
  var first = document.getElementById('first');
  var second = document.getElementById('second');
​
  $(first).mouseover(function(){
    $(second).trigger({ type:"mouseover", clientX:"350", clientY:"105" });
    $(second).trigger({ type:"mousemove", clientX:"350", clientY:"105" });
  });
​
  hoverintent(second, function(e) {
    this.className = 'on';
  }, function(e) {
    this.className = 'off';
  });
  
  $(second).mouseover(function(){
    console.log("mouseover");
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
chanporypro
0viewers