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

这是使用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 2

我会使用jquery

DEMO http://jsfiddle.net/kevinPHPkevin/RzZcZ/10/

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

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

你只能使用这样的CSS：

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

DEMO

Answer 5

此解决方案根本不需要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;
}

将Opacity属性应用于按钮

5 个答案: