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.

×
×
  • Sukurti naują...

Svarbi informacija

Informuojame, kad šiame puslapyje naudojami slapukai (angl. cookies). Sutikdami, paspauskite mygtuką „Sutinku“ arba naršykite toliau. Savo duotą sutikimą bet kada galėsite atšaukti pakeisdami savo interneto naršyklės nustatymus ir ištrindami įrašytus slapukus.