悬停时的旋转按钮答案

【问题标题】：Rotation button on hover悬停时的旋转按钮
【发布时间】：2016-08-30 07:28:07
【问题描述】：

所以我希望在悬停时出现图像旋转按钮。我以为我有一些 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;}

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

【问题讨论】：

这里的答案应该有帮助，只要去掉infinite属性stackoverflow.com/questions/16771225/css3-rotate-animation

标签： javascript css rotation

【解决方案1】：

既然您已经在使用 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();
  });
});

【讨论】：

这个选项也可以，减去滚动的按钮。仍然给你一个 1up

【解决方案2】：

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

【讨论】：

这也行。感谢您的回答@dodo121

【解决方案3】：

添加以下规则

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

JSFiddle.

你可以根据自己的需要调整left和top的位置，但是要注意按钮必须在按钮的上方。

【讨论】：