Link Hover - Cell Text addition

Hello,
I'm trying to make some changes on my forum and I'd like to ask a question beforehand I mess up everything.
Let's say I have a table with 2 cells.
Cell 1 (purple in picture, contains links)
Cell 2 (blue in picture, normally empty)



What I'd like is whenever I hover over a link in cell 1 (purple) some text to appears in Cell 2 (blue). 



I hope I was clear enough.  
So, is it possible to be done without JS?  Anyone could help me with it, please?

Hello there,

Yes, it's possible with CSS as long as you shift the hover effect downwards.

Thank you, @Draxion!  May I ask if you could help me with it?

Do you have the code for a table you have already made?

Well, that is a bit complicated, so here the one from the sample .
I just would like to see the process, I think - I hope -, I can integrate it to my table then.

(Shortly, the desired result is: When hovering over the "Link 1" - "Description 1" comes up, when hovering over "Link 2" - "Description 2" comes up in the blue cell. )

Spoiler:

Thank you!  

It's totally possible. You'll just need to :

1. Set the parent element to

Code: position:relative;

so it can contain absolute elements.
2. Set a default height and width for the table cell.
3. Add a class to each link.
4. Write a CSS rule for the default styles of the pseudo-element :after on each link.
5. Setup the content text for each link on the pseudo-element :after.

The result :

Code:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;position:relative;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tg .tg-kowa{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;background-color:#4953cb;vertical-align:top;width:100px;height:100px;}
.tg .tg-9nsu{background-color:#da3eb0;color:#fffe65}
 
.tg-9nsu a {
  color:#FF0;
  display:block;
  text-align:center;
}
 
.tg-9nsu a:after {
  width:100%;
  height:97px;
  padding:3px;
  text-align:left;
  font-size:12px;
  font-family:arial, sans-serif;
  position:absolute;
  left:0;
  bottom:0;
  overflow:auto;
}

.link1:hover:after {
  content:"Hello world !"; 
}
 
.link2:hover:after {
  content:"Good day we're having, no ?"; 
}
 
.link3:hover:after {
  content:"Goodbye my love !"; 
}
 
</style>
<table class="tg">
     
  <tbody>
     
      <tr>
             
        <th class="tg-9nsu">
            <a href="#" class="link1">Link 1</a>
            <a href="#" class="link2">Link 2</a>
            <a href="#" class="link3">Link 3</a>
        </th>
           
      </tr>
         
      <tr>
             
        <td class="tg-kowa">
           
        </td>
           
      </tr>
     
  </tbody>
</table>

You can compare the two using this : https://www.diffnow.com/

It'll show you what I changed and added, but if any questions let me know.

That's exactly what I needed! Thank you sooooo much once again, Ange!!