到目前为止,我有两个解决方案,但都没有用。谁能引导我朝着正确的方向前进?
我正在努力实现以下目标:
- 在div中隐藏文本
- 用户将按下 Ctrl 键,然后将鼠标放在按钮上 - 必须调用 javascript 函数,并显示 div 中的文本
- 如果用户释放 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/