创建悬停可见按钮

Question

我正在尝试创建一些隐藏的选项，除非用户在特定区域使用鼠标。让我们举个例子: Google+个人资料页面：

​

​

当您将鼠标光标放在图片上时，按钮就会出现。

​

​

这是我尝试过的：

​

var $button = $("#button");

$("#profile-picture").on("mouseover", function() {
  $button.show();
}).on("mouseout", function() {
  $button.hide();
});

#profile-picture {
  width: 150px;
  height: 100px;
}
#button {
  position: absolute;
  display: none;
  width: 30px;
  height: 30px;
  top: 45px;
  left: 70px;
  opacity: 0.75;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />

​

问题是，当我将光标放在#button上时，它会闪烁。我能做什么?

Answer 1

最简单的方法是将它们放在同一个div中，然后对该div使用mouseover/out。示例：http://jsfiddle.net/1g24mhhz/

HTML：

<div id="profile-picture">
    <img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" class="profile">
    <img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>

CSS编辑：

#profile-picture .profile {
    width: 150px;
    height: 100px;
}

编辑:您可能不应该为div使用ID，因为您可能在一个页面上有多个配置文件。这只是为了用您已经使用过的代码来展示它。

Answer 2

一个简单的css方法。您可以在按钮上有一个单击事件:)

​

$('#button').on('click', function() {
  alert('I am clickable');

});

#profile-picture,
.hover-wrap {
  width: 150px;
  height: 100px;
}
#button {
  position: absolute;
  display: none;
  width: 30px;
  height: 30px;
  top: 0px;
  left: 0px;
  bottom: 0;
  right: 0;
  margin: auto;
  opacity: 0.75;
  cursor: pointer;
}
.hover-wrap {
  position: relative;
}
.hover-wrap:hover #button {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="hover-wrap">
  <img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
  <img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>

​

Answer 3

你可以使用CSS:hover属性来显示/隐藏按钮，不需要Javascript。

诀窍是兄弟选择器：

#profile-picture:hover + #button, #button:hover{
    display:block;
}

试试这个：http://jsfiddle.net/6s9200ab/