All my links (<a href=""></a> ) are moving far away when I hover over them

Hey guys,

I have been starting to try my own HTML and CSS project and set up a basic website with a login form and some general links. The links are not connected to go anywhere yet but will be used for later. However, I noticed that somehow when I hover over them that the link-texts shoot to weird spots on the webpage and I cannot click them. Once I change the link in the LogIn section, all the others are somehow affected I suppose. If I delete that link “Forgot Password”, all the others work again.
Do you have an idea why this happens? I used CSS chaining to only target specific links in my code, but it doesnt work at all.

Any ideas? I am really lost.

This is the link to my github file:

Looking forward to hearing from you!

Best Regards Maximilian

Hi Maximilian,
that doesn’t happen to me when I open your website in Chrome or Safari. The only thing I noticed is that your login button changes the thickness of the border on hover, which makes it slightly jump. Since the border color is the same as the background color, that is not really necessary.

Hey Mirja,

try press and hold the mouse key down when clicking on the Logo in the top left corner. If you not release your mouse it jumps to the top right corner. At least in my browser? Did you try that?

Best Max

No I didn’t, because you wrote on hover. When you click it, I guess we have to have a look at your Javascript.
Edit: Have a look at this selector: .LogIn-PopUp form a:hover, a:active

I wanted to use the logo as a link to reconnect to the homepage in general

This is the CSS for the Logo:

.logo_large {
display: inline-block;
margin-left: 40px;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

This is the html for the Logo:



I have a feeling that it is somehow connected to the a href from the Forgot Password section:

Forgot Password?

....

CSS for the link is:

.LogIn-PopUp form a:link, a:visited {
color: #84918A;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 12px;
position: absolute;
right: 20%;
}

.LogIn-PopUp form a:hover, a:active {
text-decoration: none;
color: #84918A;
display: inline-block;
text-align: center;
font-size: 12px;
position: absolute;
right: 20%;
text-decoration: underline;
}

I have no Javascript in use for the logo link. Somehow I feel that once I click the Logo it sets itself to “right: 20%” of the entire header, which I don´t understand.

Do you have any ideas?

There you go. You set it to right: 20% on pseudo class :active

Okey, but shouldn’t it only affact the links in the subchain of the pop up form? The large Logo is not in the same chain?
Sorry I still don´t get it.

The comma separates it. What you wrote here means this in long:

.LogIn-PopUp form a:hover {
text-decoration: none;
color: #84918A;
display: inline-block;
text-align: center;
font-size: 12px;
position: absolute;
right: 20%;
text-decoration: underline;
}
a:active {
text-decoration: none;
color: #84918A;
display: inline-block;
text-align: center;
font-size: 12px;
position: absolute;
right: 20%;
text-decoration: underline; }

THANK YOU SO MUCH!!! I totally misunderstood the comma. I also noticed that I didn´t declare a “header a {}” section in the CSS to only focus on the logo.
Now, I could solve all the problems thank you"

1 Like

You’re welcome! I don’t know where the misunderstanding comes from, did you have a look at Sass already? In Sass you could write it like this:

.LogIn-PopUp form {
a:hover,
a:active 
{
text-decoration: none;
color: #84918A;
display: inline-block;
text-align: center;
font-size: 12px;
position: absolute;
right: 20%;
text-decoration: underline; 
}
}

That evaluates to

.LogIn-PopUp form a:hover,
.LogIn-PopUp form a:active 
{
text-decoration: none;
color: #84918A;
display: inline-block;
text-align: center;
font-size: 12px;
position: absolute;
right: 20%;
text-decoration: underline; 
}

No I have not heard about SASS before, but I will look into it! Thanks again. I probably just overlooked the commata issue.

Best Maximilian