SavindraSingh SavindraSingh - 5 months ago 10
CSS Question

Change CSS of another div when hover on Table cell

I have seen similar post on stack exchange where you can change css of another div when hovered over one div. However in my case it is not working as I am using this with a table cell.

Here, is the HTML code:



body {
padding: 5%;
}
.tbdata {
background-color: royalblue;
color: white;
cursor: pointer;
}
.tooltip {
color: white;
opacity: 0;
transition: opacity 1s;
background-color: red;
min-width: 50px;
min-height: 100px;
}
.tbdata:hover ~ .tooltip {
opacity: 1;
}
.tbdata:hover ~ .tooltip:after {
content: attr(data-);
}

<table>
<tr>
<td class="tbdata" data-="This is the tooltip text for col1">This is table data1</td>
<td class="tbdata" data-="This is the tooltip text for col2">This is table data2</td>
</tr>
</table>

<div class="tooltip">
</div>





I want to make the
.tooltip
div visible when hovered over the
.tbdata
and also change the content using
attr()
from the table cell.

Please suggest.

Answer

I used Jquery for this solution.

  $('document').ready(function(){



  $('.tbdata').hover(
  function(){

        $(".tooltip").css("visibility","visible");
        $(".tooltip").attr("attrname","attrvalue"); //attribute
  },
  function(){

        $(".tooltip").css("visibility","hidden");
        $(".tooltip").attr("attrname","attrvalue"); //attribute

  }

  );

});

Here is example: Fiddle

Comments