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

Question

我正在尝试在图像悬停时显示一个按钮我现在拥有的是该按钮被禁用，并且在图像悬停时该按钮被启用。理想情况下，我希望按钮被隐藏，并且应该在图像悬停时“神奇地”出现。我已经在 C# 中做到了这一点。可以用 HTML、CSS 和 JS 来完成吗？？？Jquery 是我最后的选择......这是我的小提琴：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

我会使用 jquery

演示http://jsfiddle.net/kevinPHPkevin/RzZcZ/10/

$('#image').hover(
  function () {
    $('#imgbutton').show();
  }, 
  function () {
    $('#imgbutton').hide();
  }
);

Answer 2

这是一个使用 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;
}

Answer 3

来吧http://jsfiddle.net/Zrqyf/

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

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

Answer 4

此解决方案根本不需要 JavaScript。CSS就足够了。http://jsfiddle.net/rotev/BzJkB/3/

HTML：

<div class="image">
    <img src="http://guiaavare.com/img/upload/images/cupcake-azul.jpg" style="width: 100px;" />
    <button>Click me</button>
</div>

CSS：

.image {
    position: relative;
    display: inline-block;
}
.image button {
    display: none;
    position: absolute; 
    bottom: 10px; left: 10px;
}
.image:hover button {
    display: block;
}

Answer 5

你只能像这样使用 CSS：

.item:hover .imgbutton{opacity:1}
.item .imgbutton{opacity:0}

演示