Question

我正在尝试创建一个网站以使用我的Kinect。我的手是鼠标，所以当按钮被激活时我已经创建了一个指示器。

我想到的第一件事是一个圆形按钮，带有2px白色边框，使用悬停效果。将鼠标悬停在按钮上2秒钟时，边框或边框内的线条应更改为其他颜色，例如蓝色，以指示进度/时间的传递。

在将鼠标悬停在按钮上2秒后，它应该会出现点击事件，例如导航到另一个页面。

当我取消按钮时，加载过程应该慢慢倒退。

我的代码：http://jsfiddle.net/nick_craver/9pzVQ/1/

<a href="#" class="menu-arrow" onclick="showMenu('mnu_searches', event, 0, this)">Hover me!</a>

<script>
    $(function() {
      $("a.menu-arrow").hover(function() {
        $.data(this, "timer", setTimeout($.proxy(function() {
          $(this).click();
        }, this), 2000));
      }, function() {
        clearTimeout($.data(this, "timer"));
      });
    });

    function showMenu() {
        alert("showMenu function fired");
    }
</script>

图表：http://imgur.com/RdYotvd

Answer 1

我希望我理解你。我使用了纯粹的javascript和一些css来清除按钮效果。

＆＃13;

var button = document.getElementById('button');
var timer;

button.addEventListener('mouseover',function(){
	timer = setTimeout(function(){
  	alert('load new website now!');
  },2000);
});

button.addEventListener('mouseout',function(){
	clearTimeout(timer);
  //location.replace("http://imgur.com/RdYotvd");
})

＆＃13;

.menu-arrow{
  display:inline-block;
  margin:10px;
  border: solid 4px white;
  border-radius:5px;
  background-color:white;
  padding:5px;
  transition: border-color 2s ease-in-out;
}

.menu-arrow:hover{
  border-color:#33aaff;
}

＆＃13;

<a href="#" id="button" class="menu-arrow" onclick="showMenu('mnu_searches', event, 0, this)">Hover me!</a>

＆＃13;

圆形按钮CSS加载动画

1 个答案: