如何编写悬停代码？ [关闭]

Posted 2023-03-05

【中文标题】如何编写悬停代码？ [关闭]

【英文标题】：How do I write a hover code? [closed]

【发布时间】：2014-05-29 20:52:20

【问题描述】：

当我制作了一个按钮并将其悬停时，我编写了代码并尝试运行它，但它没有运行，而当我尝试在 http://jsfiddle.net/4z2zq/169/ 中运行它时，它运行完美，请帮助！！

代码：

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(); 
);
);
);

【问题讨论】：

需要按钮悬停是什么意思？你的意思是当有人将鼠标悬停在按钮上时你想应用效果？还是有什么不同？

由于它在小提琴中工作，请确保 jQuery 在您的代码中正确导入

您的 javascript 错误控制台报告了什么？如果您在整个代码中添加 console.log 语句或使用调试器查看到达了哪些行，它会报告什么？

如果你想要一个按钮，使用<button>，而不是<div>。如果您想要悬停样式，请使用 CSS，而不是 JavaScript。

div 类型 = 按钮？脑筋急转弯。

【参考方案1】：

不需要第二个匿名函数。试试：

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

如果这不起作用，则说明您没有正确引用 jQuery。在网页的头部，您需要输入：

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

【讨论】：

你改变了什么？

虽然这是真的，但它并不能解决问题。

这只是整理你的代码，如果它不适合你，你没有在页面中正确引用 jquery。

答案已编辑。再次检查 jQuery 引用。

【参考方案2】：

为什么不使用 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 使项目正确隐藏，因此当它消失时它会自动重新出现......

【讨论】：

css3 不透明度（和所有 % 值）以十进制工作 - 所以如果您使用我上面的 css 解决方案，请更改 #login:hover opacity:0; .... to #login:hover opacity:.5; ....这将使其半透明

【参考方案3】：

修复了你的小提琴以使用 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;

【讨论】：

如果你只想降低不透明度那么设置不透明度：0.3左右。