悬停时的旋转按钮

Rotation button on hover

本文关键字：按钮 旋转 悬停      更新时间：2023-09-26

所以我想在悬停时显示一个图像旋转按钮。我以为我是用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);
}

添加以下规则

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

JSFiddle。

您可以根据需要调整左侧和顶部的位置，但需要注意的是，按钮必须位于按钮的顶部。

如果需要js逻辑，可以使用.hover()->https://api.jquery.com/hover/

既然您已经在使用JQuery，这个解决方案对您有用吗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();
  });
});
相关文章：