IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Hover efekt pro jiný element než je označený.

Aktivity
Avatar
Filip Růžička
Člen
Avatar
Filip Růžička:4.10.2019 7:26

Mám označeno:

.menu li:hover, .aktivni {
  transform: matrix(1.10,0.00,0.00,1.10,25,0);
  transition-duration: 0.5s;
}

a potřebuji zároveň aby se změnila barva textu. Prosím o radu.

Zkusil jsem:

Chci docílit:

 
Odpovědět
4.10.2019 7:26
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Filip Růžička
Jaroslav Smrž:4.10.2019 7:32 
color: #kod-barvy;

Pokud i pozadi

background-color: #kod-barvy;
Nahoru Odpovědět
4.10.2019 7:32
/* Life runs on code */
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:4.10.2019 11:12

Nedal jsi sem zadny kod, ktery pres copy-paste muzeme otestovat. Psat neco, co nemusim, se mi nechce. Takze pro mne je dotaz vyreseny :)

  1. Pokud je druhy element uvnitr prvniho, tak mu muze hover nastavit z toho prvniho.
<element1>odkaz <element2>text</element2></element1>
element1:hover element2 {}
  1. Jinak bys musel pouzit javascript a definovat, kde se nachazi element2 (podle class, id, nazvu elementu, indexu-poradi, ...). google = javascript onmouseover, google = javascript hover another element
  2. da se pouzit i z-index a position pro moznost 1 a simulovat tak poznost 2. Pouziva se to treba pro interaktivni mapu cr. google = css interaktivni mapa cr
Editováno 4.10.2019 11:14
 
Nahoru Odpovědět
4.10.2019 11:12
Avatar
Filip Růžička
Člen
Avatar
Odpovídá na Jaroslav Smrž
Filip Růžička:4.10.2019 14:23

Jaroslave Smrži,
děkuji za odpověď. Ale ".menu li" není text.

 
Nahoru Odpovědět
4.10.2019 14:23
Avatar
Filip Růžička
Člen
Avatar
Odpovídá na Peter Mlich
Filip Růžička:4.10.2019 14:29

Peter Mlich,
taktéž děkuji za odpověď. Chápu princip ale stále nefunguje.
Zde máte jak jste říkal copy- paste kód.

Html:

<nav class="menu">
          <ul>
            <li class="aktivni"><a href="uvod.html">Úvod</a></li>
            <li><a href=".html">O mně</a></li>
            <li><a href=".html">Dovednosti</a></li>
            <li><a href=".html">Reference</a></li>
            <li><a href=".html">Kontakt</a></li>
          </ul>
        </nav>

Css:

.menu li:hover, .aktivni {
    transform: matrix(1.10,0.00,0.00,1.10,25,0);
    transition-duration: 0.5s;

a potřebuji při hover změnit barvu jinému elementu. V tomto případě ".menu a".
Děkuji za váš čas.

 
Nahoru Odpovědět
4.10.2019 14:29
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Filip Růžička
Jaroslav Smrž:4.10.2019 14:50

Chápu, že <li> není text. Jen nechápu, co chceš udělat. Pokud změnit barvu textu, tak to musí fungovat. Zde máš názorný příklad. Použil jsem bootstrap kvůli rychlosti a !important, abych přepsal bootstrap styly, ale princip snad pochopíš.

HTML

<html>
  <head></head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Odkaz1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Odkaz2</a>
      </li>
    </ul>
  </div>
</nav>
  </body>
</html>

CSS

ul li a {
  color: #000000 !important;
  background-color: #cccccc !important;
}

ul li a:hover {
  color: #cccccc !important;
  background-color: #666666 !important;
}
Nahoru Odpovědět
4.10.2019 14:50
/* Life runs on code */
Avatar
Filip Růžička
Člen
Avatar
Odpovídá na Jaroslav Smrž
Filip Růžička:4.10.2019 15:26

Takto to samozřejmě funguje ale já potřebuji aby se barva textu změnila při hover na .menu li. Jelikož zde by nefungovala transformace ale pouze barva textu:

.menu a:hover, .aktivni {
    transform: matrix(1.10,0.00,0.00,1.10,25,0);
    transition-duration: 0.5s;
    color: white;

a kdybych to připsal celé zvlášť:

.menu li:hover, .aktivni {
    transform: matrix(1.10,0.00,0.00,1.10,25,0);
    transition-duration: 0.5s;
}

.menu a:hover {
    color: white;
    transition-duration: 0.5s;

tak to vypadá otřesně protože hover je vždy jinde. V příloze jsem to načrtl. (pokud to mám dobře)

 
Nahoru Odpovědět
4.10.2019 15:26
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Filip Růžička
Jaroslav Smrž:4.10.2019 18:33

Vždyť to je to samé. Stačí napsat color: inherit;

<div class="menu">
      <ul>
        <li>
          <a href="#" class="odkaz">Odkaz</a>
        </li>
      </ul>
    </div>

CSS

.menu {
  background-color: #00aeef;
  padding: 30px;
}

.menu ul li {
  padding:10px;
  background-color: #ffffff;
  list-style-type: none;
  width: 50px;
  color: #00aeef;
  text-align: center;
  border: 2px solid #00aeef;
  border-radius: 5px;
}

.menu ul li:hover {
  color: #ffffff;
  background-color: #00aeef;
  border: 2px solid #ffffff;
}

.menu ul li a {
  text-decoration: none;
  color: inherit;
}

Tohle jsou naprosté základy...

Editováno 4.10.2019 18:33
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
4.10.2019 18:33
/* Life runs on code */
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:7.10.2019 7:53

Nechapu. Googlem jsi fakt nic nenasel?
Jestli to spravne chapu, tak neumis strukturu elementu v html napsat jako css. Mozna by toi mohlo pomoci jakpsatweb.cz.

<nav class="menu"> --- css: nav, nav.menu, .menu
<nav><ul><li><a> --- css: nav ul li a, nav ul, nav li, nav a, nav ul li, nav ul a, nav li a, ul li, li a, ul a

Cili, bys tam mel mit neco takoveho v tomto poradi dle nadrazenosti (jen ty, co potrebujes):

<nav class="menu"><ul><li class="aktivni"><a>
<style>
nav.menu ul li {...} /* zmen LI */
nav.menu ul li a {...} /* zmen A v LI */
nav.menu ul li:hover {...} /* zmen v hoverovanem LI */
nav.menu ul li:hover a {...} /* zmen A v hoverovanem LI */
nav.menu ul li.aktivni:hover {...} /* zmen v hoverovanem LI s class aktivni (specialne mimo normalni hover li:hover) */
nav.menu ul li.aktivni:hover a {...} /* zmen A v hoverovanem LI s class aktivni */
</style>

To nav.menu a ul je mozne vynechat, ale pro prehlednost doporucuji nechat to presne takto.

Editováno 7.10.2019 7:55
 
Nahoru Odpovědět
7.10.2019 7:53
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:7.10.2019 7:58

Jo, a jeste by slo udelat a:hover.

nav.menu ul li:hover {...} /* zmen v hoverovanem LI */
nav.menu ul li:hover a {...} /* zmen A v hoverovanem LI */
nav.menu ul li:hover a:hover {...}
nav.menu ul li.aktivni:hover {...} /* zmen v hoverovanem LI s class aktivni (specialne mimo normalni hover li:hover) */
nav.menu ul li.aktivni:hover a {...} /* zmen A v hoverovanem LI s class aktivni */
nav.menu ul li.aktivni:hover a:hover {...}
 
Nahoru Odpovědět
7.10.2019 7:58
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.