將不透明屬性應用於按鈕

我正在嘗試在圖像上懸停顯示按鈕我現在所擁有的是按鈕被禁用，並且在圖像懸停時按鈕變爲啓用狀態。理想情況下，我希望按鈕被隱藏，並且在圖像懸停時出現「神奇」的效果。我在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>

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

來源

2013-07-16 AnaMaria

首先，你的HTML代碼無效，IMG是SE如果結束標記 –

當您將鼠標移離圖像時，您想要發生什麼？該按鈕是否會再次隱藏？ –

其實你不知道它是什麼類型的文檔，它甚至不會在HTML5中關閉。 – Virus721

這裏有一個版本的使用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; 
}

來源

2013-07-16 13:07:51

@AnaMaria所以你不想在鼠標離開圖像時隱藏按鈕？ –

是的。如果它隱藏了按鈕，那麼用戶將如何點擊它 – AnaMaria

這裏亞去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"; 
}

來源

2013-07-16 13:05:16 Banning

你可以只使用CSS這樣的：

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

DEMO

來源

2013-07-16 13:06:38

該解決方案不需要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; 
}

來源

2013-07-16 13:12:17

我可以使用jQuery

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

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

來源

2013-07-16 13:22:35 Vector

那麼如何使用您的答案點擊按鈕？ –

但是，當您將鼠標懸停在圖像上時，該按鈕消失，使按鈕無法點擊 – AnaMaria

如果您希望它保持不變，請刪除jquery的最後一部分。像這樣http://jsfiddle.net/kevinPHPkevin/RzZcZ/11/ – Vector

將不透明屬性應用於按鈕

回答

相關問題