The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Link Hover - Cell Text addition

View previous topic View next topic Go down

Solved Link Hover - Cell Text addition

Post by Mimóza on Sun 10 Apr - 7:38

Hello,
I'm trying to make some changes on my forum and I'd like to ask a question beforehand I mess up everything. Very Happy
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. Very Happy 
So, is it possible to be done without JS?  Anyone could help me with it, please? Very Happy


Last edited by Mimóza on Thu 14 Apr - 11:19; edited 1 time in total
avatar
Mimóza
Forumember

Female Posts : 592
Reputation : 255
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Draxion on Sun 10 Apr - 7:53

Hello there,

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

Male Posts : 1041
Reputation : 156
Language : English
Location : USA

http://dawnofthedragons.forumotion.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Mimóza on Mon 11 Apr - 8:00

Thank you, @DraxionVery Happy May I ask if you could help me with it? Very Happy
avatar
Mimóza
Forumember

Female Posts : 592
Reputation : 255
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Draxion on Mon 11 Apr - 15:27

Do you have the code for a table you have already made?
avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1041
Reputation : 156
Language : English
Location : USA

http://dawnofthedragons.forumotion.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Mimóza on Tue 12 Apr - 10:36

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

(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. Very Happy)
Spoiler:

Code:
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.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}
.tg .tg-9nsu{background-color:#da3eb0;color:#fffe65}
</style>
<table class="tg">
       
   <tbody>
      
      <tr>
               
         <th class="tg-9nsu">
            Link 1<br />Link 2<br />Link 3
         </th>
             
      </tr>
          
      <tr>
               
         <td class="tg-kowa">
            
         </td>
             
      </tr>
      
   </tbody>
</table>

Thank you!  
avatar
Mimóza
Forumember

Female Posts : 592
Reputation : 255
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Ange Tuteur on Tue 12 Apr - 23:57

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. salut
avatar
Ange Tuteur
Forumaster

Male Posts : 13130
Reputation : 2816
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Mimóza on Thu 14 Apr - 11:19

That's exactly what I needed! Thank you sooooo much once again, Ange!! Very Happy ůů
avatar
Mimóza
Forumember

Female Posts : 592
Reputation : 255
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by SLGray on Thu 14 Apr - 21:29

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 38485
Reputation : 2589
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum