CODEWITHSUNDEEP
jqueryhtmlcss
Ayush Jaiswal
Ayush Jaiswal

Reputation: 43

display a div over a div with display property table-row

I'm trying to put some data in tabular format. I want to put data in divs but also formatted, so I used display:table-row on div. Also I want to be able to show a div(<div class='hover'>) with options over table-row div(<div class='row'>) when someone hovers over it.

CSS

.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.row {
width: 100%;
display: table-row;
}
.column {
display: table-cell;
vertical-align: middle;
}
.hover {
width: 100%;
display: none;
z-index: 5;
position: absolute;
height: 100%;
background-color: #fff;
opacity: 0.3;
}

HTML

<div class='table'>
    <div class='row'>
        <div class='column'>ID</div>
        <div class='column'>Room</div>
        <div class='column'>Name</div>
        <div class='column'>Photo</div>
        <div class='column'>Deposit Money</div>
        <div class='column'>Balance</div>
    </div>
    <div class='row content'>
        <div class='hover'></div>
        <div class='column'>".$row['id']."</div>
        <div class='column'>".$row['room']."</div>
        <div class='column'>".$row['name']."</div>
        <div class='column'><img src='' width='80' height='80'></div>
        <div class='column'>".$row['total']."</div>
        <div class='column'>".$row['current']."</div>
    </div>
</div>

jQuery

$('.content').bind({
                mouseenter: function(){
                    $('.hover').each(function(){
                        $(this).show();
                    });
                },
                mouseleave: function() {
                    $('.hover').each(function(){
                        $(this).hide();
                    });
                }
            });

The problem is when I hover over <div class='row'> , <div class='hover'> appears but it shifts all the elements in row by one cell. Please help me.

Upvotes: 1

Views: 1562

Answers (1)

Paulie_D
Paulie_D

Reputation: 115066

Instead of CSS Tables, perhaps flexbox which allows this kind of interaction.

$('.content').bind({
  mouseenter: function() {
    $('.hover').each(function() {
      $(this).show();
    });
  },
  mouseleave: function() {
    $('.hover').each(function() {
      $(this).hide();
    });
  }
});
.row {
  display: flex;
  text-align: center;
}

.column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items:  center;
}

.row.header .column {
  border:1px solid lightblue;
  background: rgba(0,0,255,0.5);
  padding: 1em;
}

.row.content .column {
  border:1px solid lightgreen;
  background: #bada55;
}

.content {
  position: relative;
}

.hover {
  width: 100%;
  display: none;
  z-index: 5;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,.3);
  color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='table'>
      <div class='row header'>
        <div class='column'>ID</div>
        <div class='column'>Room</div>
        <div class='column'>Name</div>
        <div class='column'>Photo</div>
        <div class='column'>Deposit Money</div>
        <div class='column'>Balance</div>
    </div>
    <div class='row content'>
        <div class='hover'> I'M AN OVERLAY</div>
        <div class='column'>ID</div>
        <div class='column'>ROOM</div>
        <div class='column'>NAME</div>
        <div class='column'><img src="http://lorempixel.com/output/people-q-c-80-80-6.jpg"/></div>
        <div class='column'>TOTAL</div>
        <div class='column'>CURRENT</div>
    </div>
</div>

Codepen Demo

Upvotes: 1

Related Questions