☰

» »

css hover

css hover

BRBR ::

Naredil bi nekaj takega:
link

s tem da bi bilo pri meni nekaj v temle smislu, vse centrirano, ena vrstica centriranih thumbov,
naslednaj vrstica ta velike slike, ker bi bila itak samo ena naenkrat prikazana tudi ta centrirana:

<div style = "text-align:center">
  <div id = "thumbs">
     <img style = "fixna višina/širina, na hover prikaži ustrezno sliko spodaj" />
     <img ...
  </div> 
  <div id = "images">
     <img style = "auto višina/širina; display:none" />
     <img ...
  </div>
</div>


Očitno s css, vsaj v2, se tole ne da. Če ma kdo kak predlog ?
Never underestimate the power of idiots in large groups.
  • spremenil: BRBR ()

Trinitron ::

Uporabit boš moral javaScript ozirom jQuery (bolj enostavno).

Za zgornje slike ustvariš mousedown event: $('#thumbs img').mousedown(function(){tukaj nastaviš src velike slike})
In seveda mouseup event: $('#thumbs img').mouseup(function(){resetiraš src velike slike})

petzup ::

Ve kdo kako naredit da bi na hover nekega img taga znotraj img dodalo pas recimo v div ali span, kjer bi lahko imel poljuben text?

galu ::

HTML:
<div id="pas_parent">
<img id="img" src="...">
<div id="pas">bla</div>
</div>


CSS:
#pas_parent {
position: relative;
}
#pas {
display: none;
position: absolute;
bottom: 0px;
width: 100%;
}
#img:hover + #pas {
display: block;
}
Tako to gre.

petzup ::

Super,hvala!

petzup ::

Ena zadeva je še rad bi potem znotraj tega traka, ki se prikaže na sliki dodal nek link, ampak problem je ko grem z miško na ta trak ga prikaže/skrije kako bi lahko to rešil?
Tako sem oblikoval trenutno kodo:
<style>
.pas_parent {
position: relative;
float: left;
}
.pas {
display: none;
position: absolute;
bottom: 0px;
border: 1px solid #c0c0c0;
background: #c0c0c0;
width: 100%;
}
.img:hover + .pas {
display: block;
}
</style>
<div class="pas_parent">
<img class="img" src="https://static.slo-tech.com/60190sm.jpg">
<div class="pas">bla<a href="">text</a></div>
</div>

<div class="pas_parent">
<img class="img" src="https://static.slo-tech.com/60190sm.jpg">
<div class="pas">bla</div>
</div>

<div class="pas_parent">
<img class="img" src="https://static.slo-tech.com/60190sm.jpg">
<div class="pas">bla</div>
</div>

<div class="pas_parent">
<img class="img" src="https://static.slo-tech.com/60190sm.jpg">
<div class="pas">bla</div>
</div>


Rešeno.

Zgodovina sprememb…

  • spremenilo: petzup ()

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Zimske gume na svojih platiščih in centriranje

Oddelek: Loža		337676 (6756) energetik
»

[divXvid] Gran prix predvajalniki

Oddelek: Zvok in slika		3311050 (6209) jure1
»

[divXvid] Amstrad predvajalniki (strani: 1 2 3 4 )

Oddelek: Zvok in slika		15922801 (10610) timzl
»

[DivXviD] Yamakawa predvajalniki (strani: 1 2 3 4 5 6 7 )

Oddelek: Zvok in slika		30236151 (14940) aco111
»

vertikalno centriranje strani

Oddelek: Izdelava spletišč		181620 (1309) rokpok

Več podobnih tem