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.
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.
So, is it possible to be done without JS? Anyone could help me with it, please?
I'm trying to make some changes on my forum and I'd like to ask a question beforehand I mess up everything.
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.
So, is it possible to be done without JS? Anyone could help me with it, please?
Last edited by Mimóza on Thu 14 Apr 2016 - 11:19; 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 .
I just would like to see the process, I think - I hope -, I can integrate it to my table then.
(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!
I just would like to see the process, I think - I hope -, I can integrate it to my table then.
(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. )
- 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!
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.
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.
Re: Link Hover - Cell Text addition
That's exactly what I needed! Thank you sooooo much once again, Ange!!
Re: Link Hover - Cell Text addition
Topic solved and archived
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.
Similar topics
» How do I create a link where you hover over the link and it pops up some kinda text?
» Slow link hover highlighting
» Hover text?
» Link on text
» Hover text on image
» Slow link hover highlighting
» Hover text?
» Link on text
» Hover text on image
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum