Question

我在尝试将主动悬停放在导航上时遇到了一些问题。我已经创建了我的导航作为一个不像<li>的div，所以我找到了W3Schools的解决方案，但它对我不起作用。：P

有兴趣帮助我吗？这是我的代码，提前谢谢。

body {
  background-color: #DCDCDC;
  box-sizing: border-box;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-right:solid rgb(200, 101, 103);
  border-left: solid rgb(200, 101, 103);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

h1 {
  font-size: 120px;
  text-align: center;
  font-family: "Jockey One";
  color: rgb(200, 101, 103);
  box-sizing: border-box;
}

h2 {
  font-family: "Jockey One";
  font-size: 50px;
  color: rgb(200, 101, 103);
}

p {
  font-family: "Allerta Stencil";
  font-size: 25px;
}


#header {
  height: 50px;
  box-sizing: border-box;
  width: auto;
}

#navigacija {
  right: 20px;
  left: 20px;
  height: 50px;
  overflow: hidden;
  text-align: right;
  background-color: #089DE3;
  z-index: 9999;
  box-sizing: border-box;
  border-radius: 25px;
  position: fixed;
  border-top: solid rgb(200, 101, 103);
  border-bottom:  solid rgb(200, 101, 103);
}

.navitem {
  background: #089DE3;
  color: white;
  line-height: 50px;
  font-size: 30px;
  font-family: "Fjalla One";
  display: inline-block;
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}



.home:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.gallery:hover {
  background: #00C5CD;
  box-sizing: border-box;
}

.contact:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

.info:hover {
  box-sizing: border-box;
  background: #00C5CD;
}

img {
  float: right;
}

.footer {
  background-color: #089DE3;
  height: 100px;
  border-top: 2px solid rgb(200, 101, 103);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom: solid rgb(200, 101, 103);
}

#p1 {
  color: white;
  font-size: 50px;
  font-family: "Fjalla One";
  text-align: center;
  line-height: 100px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML i CSS</title>
<link rel="stylesheet" href="Home.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" />

<style type="text/css">
/*<![CDATA[*/
 img.c1 {width:200px; height:200px;}
/*]]>*/
</style>

</head>

<body>

<div id="header">
<div id="navigacija">
<a class="active" href="Home.html">
<div class="navitem home"><strong>HOME</strong></div></a>
<a href="#"></a>
<div class="navitem gallery"><strong>GALLERY</strong></div>
<a href="#"></a>
<div class="navitem contact"><strong>CONTACT</strong></div>
<a href="#"></a>
<div class="navitem info"><strong>INFO</strong></div>
</div>
</div>
<h1><strong>HTML i CSS</strong></h1>
<h2>HTML</h2>
<p><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html logo" class="c1" /> HTML (engl. HyperText Markup Language, jezik za oznacavanje hiperteksta) je opisni jezik specijalno namenjen opisu veb stranica. Pomocu njega se jednostavno mogu odvojiti elementi kao sto su naslovi, paragrafi, citati i slicno. Pored toga, u HTML standard su ugradjeni elementi koji detaljnije opisuju sam dokument kao sto su kratak opis dokumenta, kljucne reci, podaci o autoru i slicno. Ovi podaci su opstepoznati kao meta podaci i jasno su odvojeni od sadrzaja dokumenta. Aktuelna verzija standarda je HTML 4.01, a sam standard odrzava Konzorcijum za Veb (W3C, World Wide Web Consortium).HTML je nastao uproscavanjem SGML (Standard Generalized Markup Language, standardizovani uopsteni jezik za oznacavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na vebu.U pocetku je bio prilicno ogranicen sto se oznacavanja sadrzaja tice i pruzao je uglavnom elementarne stvari za oznacavanje i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrzajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva, napredno formatiranje teksta itd.Svi HTML dokumenti bi trebalo da pocinju sa definicijom tipa dokumenta DTD, Document Type Definition koji pregledacu definise po kom standardu je dokument pisan.Ovaj kod govori pregledacu da je dokument pisan po strogom HTML 4.01 standardu. Ovaj konkretan standard iskljucuje koriscenje prezentacionih elemenata da bi se sto bolje odvojila prezentacija od sadrzaja.</p>
<h2>CSS</h2>
<p><img src="http://www.blackbirdsolutions.com.au/sites/default/files/styles/medium/public/blog/css3-logo.png?itok=r8kt8WZA" alt="css logo" class="c1" />CSS (engl. Cascading Style Sheets) je jezik formatiranja pomocu kog se definise izgled elemenata veb-stranice. Prvobitno, HTML je sluzio da definise kompletan izgled, strukturu i sadrzaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i sadrzaja.CSS je u odredjenoj formi postojao jos u zacecima SGML-a 1970-ih godina. Kako je HTML postajao komplikovaniji, davao je sve vise mogucnosti za definiciju izgleda elemenata, ali je istovremeno postajao necitljiviji i tezi za odrzavanje. Razliciti brauzeri su prikazivali dokumente na razlicite nacine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici. Da bi se ovo postiglo, devet razlicitih metoda je predlozeno na zvanicnom forumu W3C-a. Od devet, dve metode su izabrane kao temelj onoga sto je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada sef tehnicke sluzbe kompanije Opera) predlozio CHSS u oktobru 1994, jezik koji je imao dosta slicnosti sa danasnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni nacin definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbaceno iz skracenice CHSS jer se CSS mogao odnositi i na druge jezike pored HTML-a).</p>
<div class="footer" id="p1"><strong>Uradio: Marko Ribic Ia</strong></div>
</body>
</html>

Answer 1

您需要确保将active类添加到页面上的正确元素。从您的代码中，您要将类添加到a元素，而不是菜单项的div。

  <a href="Home.html">
   <div class="navitem home active"><strong>HOME</strong></div>
  </a>

然后，您需要为active类添加CSS：

.active {
  background-color: pink;
}

以下是更新代码的小提琴： https://fiddle.jshell.net/rk9n242L/

导航.active

1 个答案: