ホバー上の回転ボタン

Question

画像を回転させるボタンをホバーに表示させることを検討しています。私はいくつかのCSSで考えていたと思っていましたが、間違ってしまったのでしょう。ここに私のバイオリンを参照してください：事前にFiddle

おかげ

CSS

body { 
    font-family: sans-serif; 
} 

#foo { 
    width:100px; 
    height:100px; 
    position:absolute; 
    top:20px; 
    left:20px; 
    border-spacing: 0; 
    background:none; 
    transition: all 1s ease; 
} 

button {display:none;} 

#foo img {width:100%;} 
    #foo img:hover button {display: block;} 

JSに

function rotateFoo(){ 
    var angle = ($('#foo').data('angle') + 1080) || 1080; 
    $('#foo').css({'transform': 'rotate(' + angle + 'deg)'}); 
    $('#foo').data('angle', angle); 
} 

Answer 1

を次のルールを追加します。

#foo:hover + button, button:hover { 
    display: block; 
    position: relative; 
    left: 50px; 
    top: 50px 
} 

JSFiddle。

必要に応じて左と上の位置を調整できますが、ボタンはボタンの上にある必要があることに注意してください。

Answer 2

あなたがjsのロジックが必要な場合は.hover()を使用することができます - >https://api.jquery.com/hover/

Answer 3

すでによhttps://jsfiddle.net/6sw9yrmk/13/

$(document).ready(function() { 
    $(document).on('mouseenter', '.divbutton', function() { 
    $(this).find(":button").show(); 
    }).on('mouseleave', '.divbutton', function() { 
    $(this).find(":button").hide(); 
    }); 
});