a:hover - Hintergrundfarbe für gesamtes Element

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich habe damit begonnen, mich in HTML und CSS einzuarbeiten und stehe vor einem kleinen Problem.

In meiner Navigationsleiste habe ich einige Elemente, die rechts und links einen Innenabstand besitzen. Wenn ich eine Hintergrundfarbe für diese Elemente einfüge, wird das gesamte Element eingefärbt. Die Leiste ist weiß.

Da es sich hierbei um Links zu anderen Teilen meiner Seite handelt, möchte ich das gesamte Element nun in schwarz einfärben, wenn ich bei a:hover nun aber color auf schwarz setze, wird nur der Hintergrund des Texts, nicht aber der Bereich des Innenabstands in schwarz eingefärbt.

Wie kann ich das ändern?

2

Link zur Seite oder poste dein Quelltext inkl. CSS

3

Hallo,

in der Regel werden zwei Möglichkeiten verwendet: Die a-Elemente befinden sich direkt innerhalb eines Containers wie nav oder nach alter Schule wird zwischen nav und a noch eine ungeordnete Liste eingefügt. Die erste, aktuellere, Möglichkeit hat den Vorteil, dass das Layout einfacher zu bewerkstelligen ist und die a-Elemente können unmittelbar aufeinander reagieren.

Bei der ersten Möglichkeit könnte die Navigation folgendermaßen erstellt sein:

<nav>
   <a href="#">Banane</a>
   <a href="#">Kiwi</a>
   <a href="#">Kirsche</a>
   <a href="#">Erdbeere</a>
   <a href="#">Mango</a>
   <a href="#">Mandarine</a>
</nav>

und das CSS folgendermaßen

a {
   background-color: moccasin;
   color: black;
   text-decoration: none;
   padding: 0.3rem 0.6rem;
   border: 1px solid black;
   display: inline-block;
}
a:hover {
   background-color: black;
   color: white;
}

Mit Liste würde das HTML dann so aussehen

<nav>
   <ul>
      <li><a href="#">Banane</a></li>
      <li><a href="#">Kiwi</a></li>
      <li><a href="#">Kirsche</a></li>
      <li><a href="#">Erdbeere</a></li>
      <li><a href="#">Mango</a></li>
      <li><a href="#">Mandarine</a></li>
   </ul>
</nav>

und das CSS dazu

ul {
   padding: 0;
}
li {
   display: inline-block;
   list-style-type: none;
}
a {
   background-color: moccasin;
   color: black;
   text-decoration: none;
   padding: 0.3rem 0.6rem;
   border: 1px solid black;
}
a:hover {
   background-color: black;
   color: white;
}

Die Farben, Abstände und Ränder werden jeweils beim a-Element angepasst. Ich habe zum Testen mal eine Beispieldatei mit beiden Möglichkeiten erstellt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Navigation 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      /*Für IE 11*/
      main {
         display: block;
      }
   }
   /*Spezielle Einstellungen*/
   @media all {
      /*CSS für die Listendarstellung*/
      ul {
         padding: 0;
      }
      li {
         display: inline-block;
         list-style-type: none;
      }
      /*CSS für beide Möglichkeiten*/
      nav {
      }
      a {
         background-color: moccasin;
         color: black;
         text-decoration: none;
         padding: 0.3rem 0.6rem;
         border: 1px solid black;
      }
      a:hover {
         background-color: black;
         color: white;
      }
      /*CSS für die Darstellung ohne Liste*/
      nav:nth-child(1) a {
         display: inline-block;
      }
   }
   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <nav>
      <a href="#">Banane</a>
      <a href="#">Kiwi</a>
      <a href="#">Kirsche</a>
      <a href="#">Erdbeere</a>
      <a href="#">Mango</a>
      <a href="#">Mandarine</a>
   </nav>
   <nav>
      <ul>
         <li><a href="#">Banane</a></li>
         <li><a href="#">Kiwi</a></li>
         <li><a href="#">Kirsche</a></li>
         <li><a href="#">Erdbeere</a></li>
         <li><a href="#">Mango</a></li>
         <li><a href="#">Mandarine</a></li>
      </ul>
   </nav>
</body>
</html>

Gruss

MrMurphy

4

Wow, danke für die schnelle Antwort!

Das hat mir sehr geholfen, ich glaube, ich hätte einfach nur display zu inline-block ändern müssen. =)

Danke!