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

Fórum › CSS

~ Anonymní uživatel
~ 188 příspěvků

5. 12. 2021 #1

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.–

JerryM 0

Věrný člen

5. 12. 2021 #2

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;}

.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
~ 1891 příspěvků

5. 12. 2021 #3

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

Nahlásit jako SPAM

IP: 213.211.51.–

gna

~ Anonymní uživatel
~ 1891 příspěvků

5. 12. 2021 #4

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