Javascript 事件 - 同时按住 CTRL 键并将鼠标悬停在按钮上

标签 javascript jquery html css

到目前为止,我有两个解决方案,但都没有用。谁能引导我朝着正确的方向前进?

我正在努力实现以下目标:

  1. 在div中隐藏文本
  2. 用户将按下 Ctrl 键,然后将鼠标放在按钮上 - 必须调用 javascript 函数,并显示 div 中的文本
  3. 如果用户释放 Ctrl 键 - 文本应该消失(即使鼠标在按钮上),类似地如果用户将鼠标移出按钮 - 文本应该消失(即使按下 Ctrl 键)

第一次尝试:

<html>
    <head>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script>
       $(document).ready(function(){

           $("#center").css("visibility","hidden"); //Hidden text in the beginning

            $("#select").mouseover(function(e){
                while(e.ctrlKey) 
                  $("#center").css("visibility","visible");
                $("#center").css("visibility","hidden");     
            }).mouseout(function(){
               $("#center").css("visibility","hidden");
            });
        });   
    </script>
    </head>

    <body>
      <button type="button" id="select">CTRL+mouseover</button>
      <div id="center">
            <h1>Text text text</h1>
      </div>
    </body>

</html>

第二次尝试:

http://jsfiddle.net/o0q5nszz/10/

作为简历,整个代码的想法是按住 CTRL + 鼠标悬停在 button 上会显示隐藏的文本。谁能引导我朝着正确的方向前进?

最佳答案

我添加了一个按钮并在按钮上附加了之前的#center 鼠标事件

请参阅此工作 fiddle :http://jsfiddle.net/o0q5nszz/11/

$(document).ready(function(){
    $(document).focus();
    var keyPressed = false;
    var mouseovered = false;
    $("#btn").mouseover(function(e){
      doStuff();
         mouseovered = true;
    });
    $("#btn").mouseout(function(){
        doStuff();
        mouseovered = false; 
    });
    $(document).keydown(function(e){
         doStuff();
         if (e.ctrlKey) 
         {
             keyPressed = true;
         }
        else keyPressed = false;
    });

    $(document).keyup(function(e){

         if (keyPressed) 
         {
             keyPressed = false;
         }
        doStuff();
    });

    function doStuff()
    {
        if(mouseovered && keyPressed) $("#center").css({"color": "#000"});
    else  $("#center").css({"color": "#fff"});
    }
});

关于Javascript 事件 - 同时按住 CTRL 键并将鼠标悬停在按钮上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28582254/

相关文章:

javascript - 作为匿名函数的默认事件处理程序与函数名称之间有什么区别

javascript - Vue 从插件发出事件

javascript - 编码时间太长,现在我无法使用最简单的脚本

javascript - Lodash/javascript : Compare two collections and return the differences

javascript - 单击一次即可查看同一类中的所有元素

jquery获取最后一个输入字段索引

html - 使用 CSS 垂直格式化数学方程式 (5,343 + 32)

javascript - Canvas fillRect 高度和宽度总是倾斜/扭曲

html - CSS 继承和 float :left issues

javascript - 每次我在 jQuery 中更改新创建的选择框的值时如何添加新的选择框?