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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Filip Růžička

Člen

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

Jaroslav Smrž

Tvůrce

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 */

Peter Mlich

Člen

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

Pokud je druhy element uvnitr prvniho, tak mu muze hover nastavit z toho prvniho.

<element1>odkaz <element2>text</element2></element1>
element1:hover element2 {}

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

Filip Růžička

Člen

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

Filip Růžička

Člen

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

Jaroslav Smrž

Tvůrce

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 */

Filip Růžička

Člen

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

Jaroslav Smrž

Tvůrce

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č

Nahoru Odpovědět

4.10.2019 18:33

/* Life runs on code */

Peter Mlich

Člen

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

Peter Mlich

Člen

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.

Nejčastěji vyhledáváné

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