0
Ich bin ziemlich neu in Web-Entwicklung, also obwohl geschätzt, ich bin nicht auf der Suche nach Kritik auf "Best Practices", ich realisiere das ist nicht schön Code, aber ich bin mir nicht sicher, warum die a: Hover Funktion funktioniert nicht. es funktioniert tatsächlich für andere Teile des Codes, die nicht enthalten sind, aber ich bin nicht sicher, warum dieser Code nicht funktioniert, würde jede Einsicht geschätzt werden.: Hover funktioniert nicht
HINWEIS: Es gibt kein Problem mit dem .css Dateipfad oder irgendetwas, alle anderen Stile Elemente funktionieren einwandfrei.
Also mit dieser Frage habe ich zwei Dateien, meine .html-Datei sowie meine main.css-Datei enthalten. Ich habe alle persönlichen Informationen und jeglichen Code entfernt, der für das eigentliche Problem nicht relevant ist.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-decoration-color: white;
}
html {
margin: 0px;
}
body {
margin: 0px;
min-height: 100%;
}
.home {
position: relative;
z-index: -2;
}
.intropage {
position: fixed;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
}
#enterwebsite {
font-family: 'Cookie';
font-size: 48px;
color: white;
border: solid white 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
#enterwebsite:hover {
font-family: 'Cookie';
font-size: 48px;
color: black;
border: solid black 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
.enterbutton-container {
position: absolute;
top: 60%;
left: 39.5%;
}
.enterbutton {
text-align: center;
}
.backgroundimage {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("styles/images/SF2.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.backgroundimage img {
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
overflow: hidden;
}
.navigation {
display: flex;
background: rgba(10, 10, 10, 0.9);
}
.logo {
display: flex;
flex-grow: 30;
justify-content: center;
align-items: flex-start;
}
h2 {
color: white;
font-family: 'Raleway';
}
p {
color: white;
padding: 32px;
font-family: 'Raleway';
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.logo h1 {
margin: 0;
color: rgba(230, 230, 230, 1.0);
font-family: 'Raleway';
font-size: 32px;
}
#logotop {
text-decoration: underline;
}
#logobottom {
text-decoration: overline;
}
.logotext {
justify-content: center;
}
.intro-container {
display: flex;
justify-content: center;
margin-top: 150px;
}
.intro {
display: flex;
flex-flow: column;
align-items: center;
width: 40%;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
.menu {
flex-grow: 70;
display: flex;
align-items: flex-end;
z-index: auto;
}
.ul-menu {
flex-grow: 1;
display: flex;
list-style-type: none;
justify-content: space-between;
}
.menu-item {
flex-grow: 1;
color: white;
font-family: 'Raleway';
}
.profilepic img {
border: solid 2px cyan;
border-radius: 50%;
margin-top: -100px;
}
.topmenuitem {
text-decoration: none;
color: white;
flex-grow: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>
<div class="home">
<div class="navigation">
<div class="logo">
<div class="logocontainer">
<a href="index.html">
<div class="logotext">
<h1 id="logotop">JOHN J</h1>
</div>
<div class="logotext">
<h1 id="logobottom">JINGLEHEIMERSCHMIDT</h1>
</div>
</a>
</div>
</div>
<div class="menu">
<ul class="ul-menu">
<li class="menu-item"><a class="topmenuitem" href="home.html">Home</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Projects/code</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Music</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Websites</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">About</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Contact</a></li>
</ul>
</div>
</div>
<div class="main-body">
</div>
<div class="intro-container">
<div class="intro">
<div class="profilepic">
<img src="assests/profilephoto.jpg" alt="Profile Picture">
</div>
<h2>Welcome!</h2>
<p>Hello, and <a href="home.html"> this is a test link </a> thank you for visiting. here is some text
<br>
<br>
<br> here is some more text
</p>
</div>
</div>
</div>
wo ist das HTML-Element mit der Enterwebsite-ID? – codemax