Autor Zpráva
Lukyn2006
Profil
Ahoj vyrobil jsem animaci pro HOVER a funguje. Zkusil jsem přidat dva imputy a animaci rozjel i přes JS. Jenže po ukončení animace JS mi už nejede HOVER animace.
prosím o radu proč tomu tak je. Díky všem. L

Živá ukázka




<style>
   

.hoverhere {color:red}
   
.cl1  { width:0px; overflow:hidden; transition: 1.5s;}
   
.outer1:hover .cl1 { width  : 200px}




</style>


<p>Vyjíždějící menu </p>


<div class="outer1">
   
<div class="cl1" id="pao" style="background-Color:silver">
      Pokusný<br>
      vyjíždějící<br>
      TEXTík
   </div>
   

<div class="hoverhere">Hover Here</div><br></div>





<br>




<button onclick="document.getElementById('pao').style.width='500px';document.getElementById('pao').style.transition='3.4s';">Vysuň text </button>
<button onclick="document.getElementById('pao').className ='cl1';document.getElementById('pao').style.width='0';">Zasuň text</button>
yFang
Profil
Lukyn2006:
Protože nastavuješ javascriptem inline styly, které jsou silnější než externí styly. Místo nastavování stylů, můžeš javascriptem měnit css class, třeba nějak takhle Živá ukázka

Edit: úprava odkazu na živou ukázku
Bubák
Profil
yFang:
Zřejmě jsi úpravy kódu pro živou ukázku neuložil a vidíš je jen ty, kód máš v local storage.
Vím, že nabízíš čisté řešení, ale já JS moc neumím (nevím, jak je na tom tazatel Lukyn2006), takže nejsem schopný napsat kód podle tvé rady.

Na rychlé zalepení problému stačí do CSS přidat jedno důležité klíčové slovo.
Živá ukázka

Doporučuji javascriptem měnit třídy, jak radí yFang.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: