Question

当我制作一个按钮并且不知道它是否悬停我制作了代码并试图运行它，它没有运行，而当我试图在http://jsfiddle.net/4z2zq/169/中运行它时，它运行完美plz help !! < / p>

代码：

html：

<div type="button" id="login">Login</div>

的CSS：

#login{
position: absolute;
top: 42px;
left: 1202px;
width: 63px;
height: 19px;
background-color: #2799b6;
text-align: center;
font-family: corbel;
border-radius:20px;
color:#FFF;
font-size:15px;

    }

js：

$(document).ready(function() {


$(function() {
$('#login').hover(function() { 
$(this).fadeOut(); 
}, function() { 
$(this).fadeIn(); 
});
});
});

Answer 1

为什么不使用CSS（3如果你想要动画）？

#login{
  position: absolute;
  top: 42px;
  left: 1202px;
  width: 63px;
  height: 19px;
  background-color: #2799b6;
  text-align: center;
  font-family: corbel;
  border-radius:20px;
  color:#FFF;
  font-size:15px;
  opacity:1;
  -moz-transition:    opacity .5s;
  -o-transition:      opacity .5s;
  -webkit-transition: opacity .5s;
  transition:         opacity .5s;
}
#login:hover{
  opacity:0;
  -moz-transition:    opacity .5s;
  -o-transition:      opacity .5s;
  -webkit-transition: opacity .5s;
  transition:         opacity .5s;
}

我不知道为什么你会想要一个按钮/元素在鼠标上消失但是嘿！

如果您只想回答原始问题：

$(document).ready(function() {

    $('#login').hover(function(){$(this).fadeOut()},function(){$(this).fadeIn()});

});

问题是，fadeOut使项目正确隐藏，因此当它消失时它会自动重新出现.....

Answer 2

修复了使用css过渡http://jsfiddle.net/Cyberjetx/4z2zq/182/

的小提琴

#login{
position: absolute;
top: 42px;
/* left: 1202px; *//* this is commented out for debugging */
width: 63px;
height: 19px;
background-color: #2799b6;
text-align: center;
font-family: corbel;
border-radius:20px;
color:#FFF;
font-size:15px;

opacity:1;

-webkit-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 
-moz-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 
 -o-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    transition: all 1000ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 
}


#login:hover {
opacity: 0.3;
}

Answer 3

不需要第二个匿名功能。尝试：

<script>
$(document).ready(function() {
$('#login').hover(function() { 
$(this).fadeOut(); 
}, function() { 
$(this).fadeIn(); 
});
});
</script>

如果这不起作用，则表示您没有正确引用jQuery。在网页的head部分中，您需要输入：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

如何编写悬停代码？

3 个答案: