0
Ich bin neu in CSS und HTML und weil ich lernen will, habe ich begonnen, eine Website neu zu erstellen. Ich weiß nicht, was ich falsch mache, aber wenn ich auf die Menüschaltflächen hebe, passiert nichts und ich sehe den Mauszeiger nicht, obwohl ich ihn im Code angegeben habe. Vielen Dank im Voraus für Ihre Hilfe!Menü Hover funktioniert nicht
@charset "utf-8";
/*
* {
outline: 1px solid red !important;
}*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
\t font-family: "open sans","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
\t font-weight:300;
\t margin: 0;
\t padding:0;
\t border: 0;
\t font-size: 13px;
\t line-height: 18px;
\t color: #333333;
\t display:block;
\t vertical-align:baseline;
\t min-height: 100%;
\t min-width: 1200px;
\t position:relative;
}
.grid {
margin: 0 auto;
max-width: 1903px;
width: 100%;
\t padding: 0;
\t border: 0;
\t outline: 0;
\t position:relative;
}
.row {
width: 100%;
margin: 0px;
display: flex;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.header {
\t background-image: url(http://du1frgvkr39c.cloudfront.net/assets/landing-page/landingpage-c21ba89811cc1724fbe9abb71227cd10.jpg);
\t background-size: cover;
\t max-width: 100%;
\t position:relative;
\t height: 841px;
\t display:block;
}
.header::after {
\t content: "";
background: rgba(1, 1, 1, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/*
header > * {
z-index: 10;
}*/
.brand {
\t position: relative;
}
#logo {
\t position: absolute;
\t top: 20px;
\t left: 20px;
\t cursor: pointer;
\t box-shadow:none;
\t }
\t
.navBar {
\t float: right;
\t position: absolute;
\t right: 0;
\t display: inline;
\t padding: 10px;
\t margin: 10px 0;
}
.no-btn {
\t color: #fff;
\t display:inline;
}
/*
.no-btn li {
\t display: inline;
float: left;
margin: 55px 0;
}*/
.no-btn a {
\t color: #fff;
\t text-decoration:none;
\t list-style:none;
\t display: inline;
\t margin-left: 20px;
\t font-weight:bold;
\t font-size: 14px;
}
.navBar .no-btn a:hover {
\t background-color: rgba(255,255,255,.5);
\t color: red;
\t cursor:pointer;
\t
}
.signin {
\t color: #fff;
\t display: inline;
\t margin-left: 10px;
\t margin-top: 30px;
\t cursor: pointer;
}
.signin a {
\t color: #fff;
\t text-decoration:none;
\t list-style:none;
\t display: inline;
\t font-weight:bold;
\t font-size: 14px;
\t text-transform: uppercase;
\t border: 2px solid #fff;
\t border-radius: 2px;
\t padding: 7px 10px;
\t cursor:pointer;
}
.navBar .btn a:hover {
\t background-color: #FFF;
\t color: #333;
\t cursor: pointer;
\t
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="eng">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Travel Bucket List Community — BucketListly</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="grid">
<div class="header">
\t <div class="row">
\t <div class="col-1">
\t <div class="brand">
<a href="http://www.bucketlistly.com/" id="logo">
<img alt="Logo Icon White" src="img/logo-icon-white-2bae76747b5ea1996d4ec47a93e92ee1.png"/>
</a>
</div>
<div class="col-4">
\t <div class="navBar">
\t \t <ul>
\t <li class="no-btn"><a href="/about" title="About">About</a></li>
<li class="no-btn"><a href="/faq" title="FAQ">FAQ</a></li>
<li class="no-btn"><a href="/blog" title="Blog">Blog</a></li>
<li class="signin"><a href="/categories" class="btn" title="Ideas"><i class="fa fa-search"></i>
<span>Bucket List Ideas</span></a></li>
<li class="signin"><a href="/signin" title="Sign in">Sign in</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ist wegen des CSS, das Sie über '.header: after' geschrieben haben, um diesem Hintergrund eine helle Farbe zu geben. Beste und schnellste Übung: Geben Sie den Schatten mit Photoshop oder einem Bildbearbeitungswerkzeug über das Bild. und entferne diesen Code –