The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Link Hover - Cell Text addition

4 posters

Go down

Solved Link Hover - Cell Text addition

Post by Mimóza 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)

Link Hover - Cell Text addition Aaaaa

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

Link Hover - Cell Text addition Hover2

I hope I was clear enough. Very Happy 
So, is it possible to be done without JS? Link Hover - Cell Text addition 1f601 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
Mimóza
Forumember

Female Posts : 676
Reputation : 278
Language : Hungarian, English

https://graphicballoon.forumotion.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Draxion April 10th 2016, 7:53 am

Hello there,

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

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

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

Female Posts : 676
Reputation : 278
Language : Hungarian, English

https://graphicballoon.forumotion.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Draxion April 11th 2016, 3:27 pm

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Mimóza 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:

Thank you!  Link Hover - Cell Text addition 270c
Mimóza
Mimóza
Forumember

Female Posts : 676
Reputation : 278
Language : Hungarian, English

https://graphicballoon.forumotion.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by Mimóza April 14th 2016, 11:19 am

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

Female Posts : 676
Reputation : 278
Language : Hungarian, English

https://graphicballoon.forumotion.com/

Back to top Go down

Solved Re: Link Hover - Cell Text addition

Post by SLGray April 14th 2016, 9:29 pm

Topic solved and archived


Link Hover - Cell Text addition Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


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