SavindraSingh SavindraSingh - 4 months ago 9x
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-);

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

<div class="tooltip">

I want to make the
div visible when hovered over the
and also change the content using
from the table cell.

Please suggest.


I used Jquery for this solution.



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

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




Here is example: Fiddle