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 April 10th 2016, 7:38 am

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 April 14th 2016, 11:19 am; edited 1 time in total
avatar
Mimóza
Forumember

Female Posts : 593
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 April 10th 2016, 7:53 am

Hello there,

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1176
Reputation : 173
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Mimóza on April 11th 2016, 8:00 am

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

Female Posts : 593
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 April 11th 2016, 3:27 pm

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1176
Reputation : 173
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Mimóza on April 12th 2016, 10:36 am

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 : 593
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 April 12th 2016, 11:57 pm

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 : 13149
Reputation : 2838
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 April 14th 2016, 11:19 am

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

Female Posts : 593
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 April 14th 2016, 9:29 pm

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 : 38735
Reputation : 2601
Language : English
Location : United States

http://classifiedads.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