按键触发 <a> 的 CSS 更改,在新选项卡中打开链接,然后回滚到以前的 CSS 状态 <a>
keydown to trigger the css change of <a>, open a link in new tab, and rollback to the previous css status of <a>
嗨,我正在开发一个小网站,一旦按下键盘上的键,以下三个将按顺序发生1)相应的更改其CSS2)在新选项卡中打开链接3) 相应的回滚到以前的 CSS 状态
这是 css。
div.website a:link, div.website a:visited{
background-color:#ffffff;
display:block;
position:relative;
text-align:center;
vertical-align:middle;
text-decoration:none;
line-height:45px;
height:45px;
font-size:14px;
border-radius:2px;
color:#474a4d;
transition-property:background-color, color, font-size;
transition-duration:0.2s;
transition-timing-function:ease;
}
div.website a:hover{
background-color:#2c3e50;
color:#ffffff;
font-size:24px;
}
这是代码
$(document).bind("keydown", function(event){
event.preventDefault();
var k = event.which || event.keyCode;
for(var i = 32; i < 91; i++){
if (i == k){
var obj = $("a.hotkey" + k);
obj.animate({
fontSize:"24px"
},{
duration:500,
complete:function(){
setTimeout(function(){
window.open(obj.attr("href"));
},500);
}
});
obj.animate({
fontSize:"14px"
});
}
}
return false;
});
这是 html 代码
<div class="col-xs-4 col-lg-4 website">
<a href="http://www.facebook.com" id="11" class="website hotkey66 hotkey32" target="_blank">
<span>facebook</span>
</a>
</div>
但是,当代码被执行时(当我实际按下键时),似乎 1) 和 3) 是同时执行的,而不是顺序的,没有 css 的变化。然后我在Chrome中进行了调试模式,它证实了我的猜测。
另外,实际上我希望悬停效果,但后来我将其更改为仅更改字体大小。如果有人能告诉我如何模拟悬停效果和回滚,那将非常感激。非常感谢!
这是一个镜头。 不要使用"jQuery.animate",只需使用CSS过渡。
按键时,将"悬停"类添加到元素,然后在触发新页面时将其删除。 还要将"悬停"规则添加到 css 中。
$(document).bind("keydown", function(event){
event.preventDefault();
var k = event.which || event.keyCode;
for(var i = 32; i < 91; i++){
if (i == k){
var obj = $("a.hotkey" + k);
obj.addClass('hover')
setTimeout(function(){
window.open(obj.attr("href"));
obj.removeClass('hover')
},500);
}
}
return false;
});
div.website a:link, div.website a:visited{
background-color:#ffffff;
display:block;
position:relative;
text-align:center;
vertical-align:middle;
text-decoration:none;
line-height:45px;
height:45px;
font-size:14px;
border-radius:2px;
color:#474a4d;
transition-property:background-color, color, font-size;
transition-duration:0.2s;
transition-timing-function:ease;
}
div.website a.hover,
div.website a:hover{
background-color:#2c3e50;
color:#ffffff;
font-size:24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-4 col-lg-4 website">
<a href="http://www.facebook.com" id="11" class="website hotkey66 hotkey32" target="_blank">
<span>facebook</span>
</a>
</div>
您会注意到Facebook不是从Stack启动的,但那是因为沙盒环境不允许弹出窗口。 我在 Codepen 中尝试了相同的方法,它似乎工作得很好。 试一试,让我知道这是否是您想要的。
相关文章:
- 如果30秒未单击,请应用CSS一次,将其删除,然后重新迭代
- 根据函数参数将CSS值存储在var中,然后对其进行操作
- 添加animate.css类,然后使用remove移除元素
- 如何点击标题中的链接,然后返回HTML、Javascript和CSS
- jQuery检查CSS宽度是否大于0,然后添加CSS属性
- HTML/CSS 如何关闭菜单,然后使用 class=“active”
- 淡入,然后使用css过渡淡出一段时间
- 有没有一种方法可以制作一个prezi,然后以某种方式将其转换为html和css类型的代码
- CSS在第一次点击jQuery.post提交时没有应用,然后在随后的点击中没有更新
- 按键触发 的 CSS 更改,在新选项卡中打开链接,然后回滚到以前的 CSS 状态
- 重新创建 3 列 facebook 风格的部分滚动,然后固定位置 CSS
- 如果我在我的页面上使用 CSS 缩放,然后将另一个包含动画的网站加载到 iframe 中,我的页面会变得模糊并且动画行为
- 简单jQuery切换到$(“html,body”).css({“overflow”:“hidden”});当打开并且然后
- 将规则添加到CSS类,然后保存样式表
- 如何确保所有元素都加载在html页面上,然后我们对CSS中的元素进行一些修改
- 在JavaScript中检索CSS属性,然后对其进行修改
- 流星助手添加适当的css一秒钟,然后消失
- 如何暂停css动画,然后从暂停点继续运行
- CSS缩放,然后调整为原始大小
- CSS按钮:悬停,禁用,然后用javascript重新启用