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

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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.

Draxion
Forumember

Posts : 361
Reputation : 48
Language : English

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

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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?

Draxion
Forumember

Posts : 361
Reputation : 48
Language : English

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!  

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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 ůů

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

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