Nefunguje příkaz "IDCLIP:hover" (.css) – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Nefunguje příkaz "IDCLIP:hover" (.css) – CSS – Fórum – Programujte.comNefunguje příkaz "IDCLIP:hover" (.css) – CSS – Fórum – Programujte.com

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

Montezo
~ Anonymní uživatel
180 příspěvků
5. 12. 2021   #1
-
0
-


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:
[code]<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<title>Moje první webová stránka</title>
                                <link rel="stylesheet" rel="nofollow" href="styl.css" type="text/css" />
</head>
<body>
    <p>odstraněno</p>
<p>odstraněno</p>
<p>odstraněno <a rel="nofollow" href="http://www.odstraněno.cz" class="tlacitko">tlačítko</a></p>
<p class="tlacitko-odstavec">
            <a rel="nofollow" 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 rel="nofollow" href="http://www.seznam.cz" class="reference-tlacitko">První odkaz - seznam.cz</a>
    <a rel="nofollow" href="#" class="IDCLIP">Druhý odkaz</a>
    <a rel="nofollow" href="#" class="IDCLIP">Třetí odkaz</a>
    <a rel="nofollow" href="#">Čtvrtý odkaz</a>
</nav>
</body>
</html>[/code]
.css
[code]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;
}[/code]
https://ibb.co/c1g7gc6
 

Nahlásit jako SPAM
IP: 178.255.168.–
JerryM0
Super člen
5. 12. 2021   #2
-
0
-

máš to blbě, to co hledáš tomu se řiká "pagination" a na netu je spousta příkladů, třeba

https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_pagination_active

dělá se to nejběžněji pomocí JavaScriptu (t.j. události onmouseover) nebo v CSS souboru atd...

jinak opak CSS stylu tady v tom druhým příkladu:

https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_pagination_active

neboli

.pagination a:hover:not(.active) {background-color: #ddd;}

je

.pagination a.active:hover {background-color: #fff;}

protože element ":hover" nebo ":not(...)" se píše s dvojtečkou a vyhodnocuje zleva doprava. a můžeš uvést oba styly najednou:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
.pagination a.active:hover {background-color: #fff;}
</style>
</head>
<body>

<h2>Active and Hoverable Pagination</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>
Nahlásit jako SPAM
IP: 2a00:1028:83bc:e52a:b51f:cd5c:c9f0:28e2...–
gna
~ Anonymní uživatel
1643 příspěvků
5. 12. 2021   #3
-
0
-

#2 JerryM
Zase nevíš, co meleš.

Nahlásit jako SPAM
IP: 213.211.51.–
gna
~ Anonymní uživatel
1643 příspěvků
5. 12. 2021   #4
-
0
-

#1 Montezo
Před IDCLIP:hover ti chybí tečka.

Nahlásit jako SPAM
IP: 213.211.51.–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 5 hostů

Podobná vlákna

Nefunguje a:hover — založil Dozer

Nefunguje hover — založil Kano

Nefunguje SQL príkaz — založil Speeder

Nefunguje .css — založil Montezo

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032022 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý