0
Meine Frage ist, warum die Links in einem Menü nicht formatiert werden, wenn sie sich in der Nähe befinden oder besucht werden. Die einzige Besonderheit dieses Projekts ist, dass das Menü innerhalb eines Headers ist, den es selbst nur anzeigt, wenn man darüber schwebt (Ich habe ein unsichtbares "dierbares" div erstellt, ohne einen besseren Weg zu kennen). Ich vermute, es gibt eine Art von Konflikt zwischen den beiden "Hover" -Zuständen (?) Der eine der Header mit den Links und der eine der Links selbst. Hier ist ein gif von dem, was es sieht aus wie:Link wird nicht formatiert, wenn er verschoben oder besucht wird
Und hier ist der Code:
@font-face {
font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
@font-face {
font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: absolute;
width: 100vw;
height: 10vh;
background-color: rgba(0, 0, 0, 0);
opacity: 1;
z-index: 6;
top: -40px;
transition: top 1s ease, background-color 1s ease;
}
#hoverable {
position: absolute;
height: 10vh;
width: 100%;
z-index: 7;
}
#hoverable:hover #header {
background-color: rgba(0, 0, 0, .3);
top: 0px;
}
#hoverable:hover #header #title h1 {
color: rgba(129, 129, 129, 1);
top: 0px;
}
#hoverable:hover #header #title h1 #parana {
color: rgba(255, 255, 255, 1);
top: 0px;
}
#hoverable:hover #menu ul li a {
color: rgba(255, 255, 255, 1);
}
#title {
margin-left: 10vw;
line-height: 10vh;
float: left;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: red;
display: none;
opacity: .5;
}
#container {
height: 100%;
width: 100vw;
background-color: white;
min-height: 580px;
text-align: center;
background-color: blue;
}
.notVisible {
opacity: 0;
}
.visible {
opacity: 1;
transition: opacity 0.7s ease-in-out;
}
#imagewrap {
position: relative;
z-index: 5;
display: inline-block;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#front {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
height: 110%;
}
#container #imagewrap:hover .buttons {
opacity: 1;
}
.buttons {
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity .3s ease-in-out;
top: 50%;
transform: translateY(-50%);
}
#previous {
left: 5px;
background-image: url(Images/carremoins.png);
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 20px;
z-index: 4;
position: absolute;
}
#next {
right: 5px;
background-image: url(Images/carreplus.png);
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 20px;
z-index: 4;
position: absolute;
}
#tag {
position: relative;
height: 40px;
line-height: 1.7em;
padding-top: 5px;
text-align: center;
font-size: 1.1em;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
h1 {
color: rgba(129, 129, 129, 0);
transition: color 1s ease;
font-family: Eagle-Light;
height: 100%;
margin-top: 10px;
padding: 0px;
margin: 0px;
font-size: 2em;
letter-spacing: 0.3em;
padding: auto 0;
}
#parana {
color: rgba(255, 255, 255, 0);
transition: color 1s ease;
}
#menu {
line-height: 10vh;
float: right;
margin-right: 5vw;
}
li,
ul {
padding: 0;
margin: 0;
list-style: none;
float: right;
}
li a {
display: block;
line-height: 10vh;
padding: 0 1em;
font-size: 1.3em;
color: rgba(255, 255, 255, 0);
transition: color 1s ease;
text-decoration: none;
}
ul {
margin-right: 2em;
}
a:visited {
text-decoration: none;
color: pink;
}
a:hover {
color: red;
}
#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
@media screen and (min-width: 1450px) and (max-width: 1675px) {
#front {
height: 900px;
}
}
@media screen and (min-width: 1675px) and (max-width: 2000px) {
#front {
height: 1000px;
}
}
@media screen and (min-width: 2001px) {
#front {
height: 1100px;
}
}<audio autoplay>
<source src="paranaMusic.mp4" type="audio/mpeg">
</audio>
<video playsinline autoplay id="bgvid" class="visible">
<source src="Images/01PARANA/noSound.mp4" type="video/mp4">
</video>
<div id="hoverable">
<div id="header">
<div id="title">
<h1>MAX RUIZ <span id="parana">PARANÁ</span></h1>
</div>
<nav class="cf" id="menu">
<ul>
<li><a href="about.html">about</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="shop.html">shop</a></li>
</ul>
</nav>
</div>
<div id="container">
<div id="imagewrap" class="notVisible">
<img src="Images/01PARANA/Image1.jpg" id="front" />
<div id="previous" class="buttons" onclick="change(-1);"></div>
<div id="next" class="buttons" onclick="change(1);"></div>
</div>
</div>
<div id="footer">
</div>Die Sache, die mir Rätsel, um die meisten ist, dass der Wert " keine "für die Eigenschaft" text-decoration "für den Selektor a: visited IS wird angewendet, aber keine Farbe, weder auf den besuchten noch auf den hovered Links. Irgendeine Idee warum? Vielen Dank für Ihre Zeit
Sie den Code in jsFiddle setzen und den Link hier teilen. – clu3Less
Sie überschreiben Ihren Code. Eine schnelle und schmutzige Lösung besteht darin, dem Hover-Stil eine wichtige Funktion hinzuzufügen. JSFiddle: https://jsfiddle.net/6mbtjqw9/ – Synthiatic
Das funktioniert. Wie überschreibe ich jetzt die Überblendung, damit meine Hyperlinks keine Sekunde brauchen, um eine andere Farbe zu werden! – Paul