Autor Zpráva
ShradCZ
Profil
Jak udělám šoupající se odkaz, že když na něj najedu myší, aby se posunul kousek nahoru? Možná to tu už někde je, ale já jsem to nenašel. Předem díky
jenikkozak
Profil
ShradCZ:
Myslíš něco takovéhoto?
<style>
a:hover{position:relative;bottom:3px}
</style>
Lorem ipsum <a href="http://jakpsatweb.cz">dolor</a> sit amet.
margin
Profil *
jenikkozak:
Sice to funguje, ale tohle řešení nemám rád, protože pokud najedu zespoda, odkaz před myší ucukne.

ShradCZ:
Na inline odkaz mě nic korektního nenapadá, s blokovým odkazem je to jednoduché a možností je hodně, které zvolit bych zvážil podle konkrétní situace.
jenikkozak
Profil
margin:
Úmyslně jsem zvolil horší situaci (inline prvek), abych si s tím pohrál, ale na nic spolehlivého jsem nepřišel.
Pokud bychom mohli přidat další značku, můžeme dosáhnout lepšího řešení:
<style>
a{display:inline-block}
a:hover b{position:relative;bottom:3px}
</style>
Lorem ipsum <a href="http://jakpsatweb.cz"><b>dolor</b></a> sit amet.
ShradCZ
Profil
Ano, myslím něco takového, děkuji. Rovnou mám k tomu ještě jeden dotaz. Nešlo by udělat, aby se text sunul plynuje a ne rychlým cukem?
ShiraNai7
Profil
ShradCZ:
Třeba pomocí jQuery. Zkusil jsem něco takového udělat. Zdá se být ok (aktuální chrome,ff,ie). A před myší "neuteče" díky přidanému paddingu.

Viz http://jsfiddle.net/C7fJH/

$('a').each(function(){

    var link = $(this);
    link.hover(
    
        function() {
            if(link.is(':animated')) {
                link.stop(true, true);
            }
            link.animate({top: -3, paddingBottom: 3});
        },
        
        function() {
            if(link.is(':animated')) {
                link.stop(true, true);
            }
            link.animate({top: 0, paddingBottom: 0});
        }
    
    );

});​

Tento kód až na konci stránky nebo v $(document).ready(function(){ ... });.
Taky bych asi necílil všechny odkazy na stránce ale jen některé. Ale to už je na tobě.
ShradCZ
Profil
ShiraNai7:
Pravděpodobně jsem někde něco udělal špatně. Za text se mi hodí zvolené pozadí, ale to je jediná věc, co mi funguje.
Připomínám, že jsem začátečník :-)
ShiraNai7
Profil
ShradCZ:
Odkaz na živou ukázku? Načítáš jQuery?

Na konec stránky dej:

normální kód stránky bla bla

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>

</body>

Pak si vytvoř main.js a do něj dáš ten můj javascriptový kód.
Pokud to nefunguje, chyba bude někde jinde.
ShradCZ
Profil
Nevím jak vám poděkovat. Konečně vše funguje :-)
Chamurappi
Profil
Reaguji na ShradCZa:
Akorát teda kvůli třípixelovému posunu načítáš stokilovou knihovnu…

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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