Pereiti prie turinio

Pagalbos! hover css


Rekomenduojami pranešimai

Žodžiu, bandau padaryti paprastą dalyką, kad užėju ant nuorodos, rodytų paveiksliuka.

Čia ir prasideda problemos.Bandžiau su javascript, bet čia tvs koją pakišo, wordpressas nemėgsta javascripto, ir jei dedu javascriptą įdeda <p> ir gaunasi tuščios eilutės vidury teksto.

Na sakau pasidarysiu su css.Bandžiau pavizdį iš čia imti, tiksliau visą svetainę išsaugojau, kas buvo tik html kodas, nukopijauvau į nelemtąjį wordpressą ir vėl nenori veikti.Šįkart užvedus pelę ant nuorodos rodė paveiksliuką nurodytoje vietoje, tačiau neužvedus pelės paveiksliukas stovėjo prie linko kame ir buvo problema...

 

Na ką sakau pats kažką sumeistrausiu savo puskreivėm rankom.Beveik išėjo, beveik.

<html>
<head>
<style type="text/css">
.kazkas a{
display: block;
width: 0px;
height: 0px;
background: url(http://ikelk.lt/storage/images/000/013/439/13439/original_img.jpg)
}
.kazkas a:hover {
width:400px;
height:566px;
possition:absolute;
top:300px;
left:500px;
}
</style>
</head>

<body>
<p><div class="kazkas"><a href="#">Nuoroda</a></shit></p>
</body>
</html>

Su pele užvedu ant nuorodos, viskas tvarkoje, atsiranda paveiksliukas, problema tame, kad negaliu jo pastumt į šona kad atsirastu daug kairiau, o ne ant pačios nuorodos, possition taipogi negelbėja.

Sakau gal padėsit kas, ar ką pasiūlysit, gal galima taip dar kažkaip kitaip padaryti ;)

Redagavo Rated
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Dėkui iGor, stipriai padėjo až ;)

sprendimas.Jei html failas:

<style type="text/css">
div#links { margin-left: 700px; }
div#links a { display: block; }
div#links a img { display: none; border: 0; }
div#links a:hover img { position: absolute; display: block; left: 300px; }
</style>
<div id="links"><a href="#">Links<img src="http://ikelk.lt/storage/images/000/013/439/13439/original_img.jpg"></a></div> 
<div id="links"><a href="#">Links<img src="http://ikelk.lt/storage/images/000/013/439/13439/original_img.jpg"></a></div> 
<div id="links"><a href="#">Links<img src="http://ikelk.lt/storage/images/000/013/439/13439/original_img.jpg"></a></div>

Jei wordpress'as, kaip šiuo atveju man, tai šitą į style.css

<style type="text/css">
div#links { margin-left: 700px; }
div#links a { display: block; }
div#links a img { display: none; border: 0; }
div#links a:hover img { position: absolute; display: block; left: 300px; }
</style>

o šitą į posto ar page'o html skiltį

<div id="links"><a href="#">Links<img src="http://ikelk.lt/storage/images/000/013/439/13439/original_img.jpg"></a></div> 
<div id="links"><a href="#">Links<img src="http://ikelk.lt/storage/images/000/013/439/13439/original_img.jpg"></a></div> 
<div id="links"><a href="#">Links<img src="http://ikelk.lt/storage/images/000/013/439/13439/original_img.jpg"></a></div>

frix, dėkui už nuorodas, tačiau jau nebeteko išbandyti ;)

Redagavo Rated
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...