Применение свойства Opacity к кнопке

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/

ЯШ:

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

Здесь я идти 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 3

Вы можете использовать только CSS, как это:

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

DEMO

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

Я хотел бы использовать JQuery

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

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