How To Develop An Edit Option On Hover Of A Div

- 1 answer

I'm trying to use the hover option to display an small edit image/button in the top right hand corner of a div. I have a dynamically created table of x by y number of cells. What I would like to do is have a tiny edit button in the top right hand corner that allows me to click on that button and bring up a popup window.

Something similar to the following: twitter hover

where the user is presented with options over the div on hover. Would this need to be done in javascript or css? I am using javascript to create the table as follows:

    var col = document.getElementById("NoColumns").value;
    var row = document.getElementById("NoRows").value;
    if (col > 0 || row > 0) {

        for (var x = 1; x <= row; x++)
            tr = document.createElement('tr');

            for (var i = 1; i <= col; i++) {
                var td = document.createElement('td');
                td.className = "drop";
       = x + ', ' + i;
                td.setAttribute('onclick', 'clicked(this);')


Display the button when you hover on the container, else keep it hidden via CSS?

.container {
  height: 200px;
  width: 200px;
  background-color: yellowgreen;
  position: relative;

.container:hover > .btn {
  display: block;

.btn {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
<div class="container">
  <button class="btn">Edit</btn>