[英]javascript onclick changes styles
i have little animation with picture, i want to change cursor to default ( on picture ), after animation start, if you try my animation, you will see that after onclick function you still have cursor: pointer on pic. 我的图片动画很少,我想将光标更改为默认值(在图片上),动画开始后,如果尝试我的动画,您会看到在onclick函数之后,图片上仍然有光标:指针。 but i want there to be default after animation.
但我希望动画后有默认值。
my fiddle: http://jsfiddle.net/1u6kbz7q/ 我的小提琴: http : //jsfiddle.net/1u6kbz7q/
HTML 的HTML
<div id="facebook_text">
<a href="https://www.facebook.com/rostislav.danko" alt="facebook" target="_blank">Odkaz</a>
</div>
<div id="facebook_image">
<img class="facebook_animation" src="facebook.jpg"></img>
</div>
<script src="facebook_animation.js" type="text/javascript"></script>
CSS 的CSS
#facebook_text {
display: none;
}
#facebook_text a {
position: absolute;
font-size: 15px;
text-decoration: none;
margin-left: 50px;
margin-top: 35px;
z-index: 1;
}
#facebook_text a:hover {
color: #e5e500;
}
#facebook_image.fly {
position: absolute;
margin-left: 125px;
margin-top: 0px;
transition: ease-in-out 1s;
}
#facebook_image img {
position: absolute;
z-index: 10;
height: 35px;
width: 35px;
margin-top: 25px;
transition: ease-in-out 1s;
cursor: pointer;
}
javascript javascript
document.querySelector('.facebook_animation').onclick=function() {
var d = document.getElementById("facebook_image");
d.className = d.className + " fly";
d.style.cursor = 'default';
var t = document.getElementById("facebook_text");
var delayed = setTimeout(function() {
t.style.display = 'block';
}, 500);
}
No need to involve JS on that cursor matter: http://jsfiddle.net/1u6kbz7q/3/ you're already adding the .fly
, so simply target the .fly's image in CSS 无需在该游标上涉及JS: http : //jsfiddle.net/1u6kbz7q/3/您已经添加了
.fly
,因此只需在CSS中定位.fly的图像即可
#facebook_image.fly img{
cursor: default;
}
also <img>
is a self-closing tag. <img>
也是一个自动关闭的标签。 no need to use the closing </img>
无需使用结尾
</img>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.