0

画像のホバーでボタンを表示しようとしています 現在、ボタンが無効になっており、画像のホバーでボタンが有効になります。理想的には、ボタンを非表示にして、画像にカーソルを合わせると「魔法のように」表示されるようにする必要があります。私はこれを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;
}
4

5 に答える 5

0

このソリューションでは、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-16T13:12:17.627 に答える
0

どうぞ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-16T13:05:16.393 に答える