Link Hover - Cell Text addition
4 posters
Page 1 of 1
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.![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
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](https://2img.net/h/i1320.photobucket.com/albums/u537/MayaGrayx3/MayaGrayx3187/aaaaa.png)
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](https://2img.net/h/i1320.photobucket.com/albums/u537/MayaGrayx3/MayaGrayx3187/hover2.png)
I hope I was clear enough.
So, is it possible to be done without JS?
Anyone could help me with it, please? ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
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](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
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](https://2img.net/h/i1320.photobucket.com/albums/u537/MayaGrayx3/MayaGrayx3187/aaaaa.png)
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](https://2img.net/h/i1320.photobucket.com/albums/u537/MayaGrayx3/MayaGrayx3187/hover2.png)
I hope I was clear enough.
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
So, is it possible to be done without JS?
![Link Hover - Cell Text addition 1f601](https://2img.net/i/fa/twemoji/16x16/1f601.png)
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
Last edited by Mimóza on April 14th 2016, 11:19 am; edited 1 time in total
Re: Link Hover - Cell Text addition
Hello there,
Yes, it's possible with CSS as long as you shift the hover effect downwards.
Yes, it's possible with CSS as long as you shift the hover effect downwards.
Re: Link Hover - Cell Text addition
Well, that is a bit complicated, so here the one from the sample . ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
I just would like to see the process, I think - I hope
-, I can integrate it to my table then. ![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
(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.
)
Thank you!![Link Hover - Cell Text addition 270c](https://2img.net/i/fa/twemoji/16x16/270c.png)
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
I just would like to see the process, I think - I hope
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
(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](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
- 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!
![Link Hover - Cell Text addition 270c](https://2img.net/i/fa/twemoji/16x16/270c.png)
Re: Link Hover - Cell Text addition
It's totally possible. You'll just need to :
1. Set the parent element to
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 :
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](https://2img.net/i/fa/i/smiles/icon_salut.gif)
1. Set the parent element to
|
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](https://2img.net/i/fa/i/smiles/icon_salut.gif)
Re: Link Hover - Cell Text addition
That's exactly what I needed! Thank you sooooo much once again, Ange!!
![ùù](/users/3412/19/22/63/smiles/35815.png)
![Very Happy](https://2img.net/i/fa/i/smiles/icon_biggrin.png)
![ùù](/users/3412/19/22/63/smiles/35815.png)
Re: Link Hover - Cell Text addition
Topic solved and archived
![](https://i.servimg.com/u/f18/16/89/96/68/sig_se10.png)
![Link Hover - Cell Text addition Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
![-](https://2img.net/i/empty.gif)
» How do I create a link where you hover over the link and it pops up some kinda text?
» Slow link hover highlighting
» how make a colored text fade into another using a hover code? (using css transitions)
» Hover text?
» Hover text on image
» Slow link hover highlighting
» how make a colored text fade into another using a hover code? (using css transitions)
» Hover text?
» Hover text on image
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum