Nefunguje příkaz "IDCLIP:hover" (.css)

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod Alesh2020 5. 12. 2021 10:57

Zdravím, při snaze toho, aby mi tlačítka změnila po nájezdu barvu, se nic nestane. Zkouším to v Google Chrome.

.html:
Kód: Vybrat vše
<!DOCTYPE html>

<html lang="cs-cz">
   <head>
      <meta charset="utf-8" />
      <title>Moje první webová stránka</title>
                                <link rel="stylesheet" href="styl.css" type="text/css" />
   </head>

   <body>
    <p>odstraněno</p>
<p>odstraněno</p>
<p>odstraněno <a href="http://www.odstraněno.cz" class="tlacitko">tlačítko</a></p>
<p class="tlacitko-odstavec">
            <a href="reference.html" class="reference-tlacitko"
              >odstraněno</a>
          </p>
      <article>
         <header>
            <img src="source/avatar.png" alt="Foto">
         </header>
         <section>
            <h1>odstraněno</h1>
            <p><em>odstraněno</em><br />
               odstraněno<br />
               odstraněno
            </p>
         </section>
      </article>
<nav>
    <a href="http://www.seznam.cz" class="reference-tlacitko">První odkaz - seznam.cz</a>
    <a href="#" class="IDCLIP">Druhý odkaz</a>
    <a href="#" class="IDCLIP">Třetí odkaz</a>
    <a href="#">Čtvrtý odkaz</a>
</nav>
   </body>
</html>


.css
Kód: Vybrat vše
body {
   font-family: Verdana;
   font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
   color: #8DEF0F;
   font-weight: normal;
   font-family: Arial;
}

h1 {
    font-size: 2.5em;
    text-align: center;
    text-shadow: 3px 3px 7px #666666;
}
h2 {
    font-size: 2em;
   }
h3 {
   font-size: 1.5em;
}
h4 {
   font-size: 1.35em;
}
h5 {
   font-size: 1.25em;
}
h6 {
   font-size: 1.15em;
}
.barvaq
{
   background: #530156;
   color: white;
}
.barvaw
{
   background: #0009FE;
   color: white;
}
.barvae
{
   background: #02FBFD;
}
.reference-tlacitko {
    background: #491DA3;
    color: #F4F80A;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}
.tlacitko:hover {
    background: yellow;
}
.IDCLIP {
    background: #77F30C;
    color: #F4F80A;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}
IDCLIP:hover
{
   background: #58ADF8;
   border: 1px solid #3B94E0;
}


https://ibb.co/c1g7gc6
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 5. 12. 2021 11:04

Protože ti před tím IDCLIP:hover chybí tečka.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Alesh2020 5. 12. 2021 11:17

Děkuji, opraveno.

Že se tlačítko lehce zvětši,
po tom, co na něj najedu myší,
je normální?
Popř. dá se tomu nějak zamezit?
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 5. 12. 2021 11:20

Zvětší se o o ten border, který tam nastavuješ.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Alesh2020 5. 12. 2021 11:26

Děkuju... že ten jeden pixel je taková kráva velká... i 0.5 to dokáže strávit.
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 5. 12. 2021 11:36

1 px po celém okraji - tj. šířka i výška se zvětší o 2 px.
Wikan
Moderátor
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků