Question

这段代码有什么问题？悬停后该按钮不起作用。代码只是从教学网站上复制而来，并在那里工作。

<html>
    <head>
        <title>Button Magic</title>

        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
       <script type="text/javascript" src="script.js">
      </script>     

    </head>
    <body>
     <div><br/><strong>Click Me!</strong></div>   
    </body>
</html>

div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.5;
}

$(document).ready(function() {
    $("div").mouseenter(function() {
        $("div").fadeTo("fast", 1)
    });

   $("div").mouseleave(function() {
    $("div").fadeTo("fast", 0.1)

});

});

Answer 1

可能的建议＃1：你不想让它消失那么多。

将fadeTo()的值更改为.5，因为这是您的CSS中的初始值。

可能的建议＃2：点击它时它什么也没做。

将onclick="alert('Clicked!');"添加到div容器。

可能建议＃3：你只想要一个html元素的悬停效果。

为什么不使用CSS 3过渡：

 div {
   transition: opacity 1s;
   opacity: .5;
 }

 div:hover {
   opacity: 1;
 }

注意：当然，您可以使用供应商前缀来支持更多浏览器，例如-webkit-transition。

Javascript按钮鼠标悬停

1 个答案: