javascript - 将不透明度属性应用于按钮

Question

我试图在图像悬停时显示一个按钮 我现在拥有的是按钮被禁用，并且在图像悬停时按钮变为启用。理想情况下，我希望按钮被隐藏并且应该在图像悬停时“神奇地”出现。我已经在 C# 中完成了这个。可以使用 HTML、CSS 和 JS 来完成吗？？？ Jquery 是我最后的选择... 这是我的 fiddle :http://jsfiddle.net/RzZcZ/

HTML

 <div>
        <img width=100px; height=100px; src="https://www.nhs.uk/InformationServiceForParents/assets/images/home-baby.jpg" onMouseover="showButton()"></img>
        <input type=button id="imgbutton" value="Open in new window" disabled="true">
    </div>

JS

showButton = function () {
   document.getElementById("imgbutton").disabled = false;
}

Answer 1

这是一个使用 css3 转换的版本:

http://jsfiddle.net/BVQk5/

js:

showButton = function () {
   var btn = document.getElementById("imgbutton");
    btn.disabled = false;
    btn.className = "fadeIn";   
}

CSS:

.fadeIn {
    transition:opacity 1s;
    opacity: 1;    
}

.hidden {
    opacity:0;
}