CODEWITHSUNDEEP
javascriptjqueryhtml
Victor
Victor

Reputation: 14593

Creating hover-visible buttons

I am trying to create some options that are hidden unless the user goes with the mouse in a specific area. Let's take an example: Google+ profile page:

The normal state of the profile picture

When you go with the mouse cursor on the picture, the button appears.

enter image description here

Here is what I tried:

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" />

The problem is that when I go with the cursor over the #button, it flickers. What can I do?

Upvotes: 0

Views: 933

Answers (3)

Amoliski
Amoliski

Reputation: 159

You can use CSS:hover properties to show/hide the button, no Javascript needed.

The trick is a sibling selector:

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

Try this: http://jsfiddle.net/6s9200ab/

Upvotes: 0

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

A simple css approach. You can have a click event on the button :)

$('#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>

Upvotes: 1

orhanhenrik
orhanhenrik

Reputation: 1415

The easiest method is placing them both in the same div, and then using mouseover/out for that div. Example: 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 edits:

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

EDIT: You should probably not use an ID for the div, since you probably have multiple profiles on a page. This was just to show it with the code you had already used.

Upvotes: 4

Related Questions