How to change the hyperlinked text effect?

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

https://rexlanguagecenter.com/tagalog-core-lessons/tagalog-beginner-lessons/introduction-in-filipino-language/

This is the page link

I’m able to make something similar

.tablepress.single-word a {
	text-decoration: underline;
	text-decoration-color: #a3420a;
	position: relative;
}

.tablepress.single-word tr a:hover {
	background-color: #ffb300;
	bottom: 0;
	height: 100%;
}

But I want to add a little bit of animation. For some reason, when I add this part of the code

.tablepress.single-word tr:hover a {
	content: '';
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 100%;
	height: 5px;
	z-index: -1;
	transition: all .3s ease-in-out;
}

when my cursor is next to/before the cell of “hyperlinked text” the hyperlinked text would disappear.
And for some reason only affected that certain row.

I found out the entire linked text is just gone. If the linked text is in a part of a sentence, those words just disappeared.

Hi,

thanks for the link!

So, do yo mean that effect where the background of the links changes to orange, with that fade-in effect from the bottom? I’m not sure why that’s not working in the tables, but as TablePress does not change anything regarding the links, you should not need any CSS for this in the “Custom CSS”. Can you maybe remove that for a test?

Regards,
Tobias

I removed those css codes,

/* Single word CSS */
.tablepress.single-word th {
	background-color: navy;
	color: white;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
}

.tablepress.single-word tbody td {
	border: solid 1px;
	border-color: #b4b5b8;
	word-break: normal !important;
	text-align: center;
}

.tablepress.single-word.column-1 tbody td {
	width: auto !important;
}

.tablepress.single-word tbody td {
	border: solid 1px;
	border-color: #b4b5b8;
	word-break: normal !important;
	text-align: center;
}

But I don’t know why still not working. The linked texts do show the underline effect. but when I hovered my cursor to the linked text, my orange background is not showing up, only the underline effect disappeared.

Hey!!!!

I Fixed it.

.tablepress.test-css a {
	text-decoration: underline;
	text-decoration-color: #a3420a;
	position: relative;
}

.tablepress.test-css tr:hover a {
	content: '';
	position: relative;
	left: 0;
	bottom: 1px;
	width: 100%;
	height: 5px;
	z-index: 1;
	transition: all .3s ease-in-out;
}

.tablepress.test-css tr a:hover {
	background-color: #ffb300;
	bottom: 0;
	height: 100%;
}

when the position is absolute somehow those texts do not disappear, they MOVED to the bottom of the post, then I changed to ” position: relative;” it worked like a charm!!!

Hi,

awesome! Good to hear that you found the solution to this!

Best wishes,
Tobias