Diskuze: CSS Hover

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

arkeas93

Člen

arkeas93:23.3.2013 8:57

Čaute,

Předem se omlouvám jestli tenhle topic někde už je (už jsem to tu prolez křížem krážem)

Chtěl bych udělat aby po najeti myši se mi obrázek změnil(mam 2 obrazky jeden 48x48 druhy 64x64)
primární je 48x48 a po najetí myši bych chtěl ten druhy 64x64.
html

<header id="hlavicka">
 <a href="#"><img src="./obrazky/domek48.png" alt="domek"></a>
</header>

css

header#hlavicka  {
                  position:relative;
                  left:462px;
                  width:180px;
                  height:160px;
                  text-align:center;
                  background:#00FFF2;
                  border-radius: 0px 0px 60px 60px;
                 }



header#hlavicka a:hover
                        {
                         background: url('../obrazky/domek64.png');
                        }

Odpovědět

23.3.2013 8:57

Honza Bittner

Tvůrce

Honza Bittner:23.3.2013 9:38

Ahoj.. pozadí u headeru máš udělané přes IMG ...
jestli chceš opravdu pozadí tak si ho nastav v CSS jako background: url(...); jinak ti mohou uživatelé šáhnout na obrázek a přenášet atp. jestli víš co myslím .. je to prostě hezčí přes background ..

<header id="hlavicka">
</header>

header#hlavicka  {
width:180px;
height:160px;
text-align:center;
background:#00FFF2 url("grafika/prvni_obraz.jpg");
border-radius: 0px 0px 60px 60px;
}

header#hlavicka a:hover
{
background: #00FFF2 url("grafika/druhy_obrazek.jpg");
}

snad ti to půjde ..

Nahoru Odpovědět

23.3.2013 9:38

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

arkeas93

Člen

arkeas93:23.3.2013 20:27

čau,

Zkoušel jsem to ale nefunguje mi to.
BTW. pozadí by měla být jen barva a obrázek jsem chtěl spíš jako tlačítko, a hover měl tlačítko jen vyměnit za větší. Ale asi mi nic víc nezbyde než to zkusit asi přes JavaScript to vím že snad nějak jde, jinak díky

Nahoru Odpovědět

23.3.2013 20:27

Honza Bittner

Tvůrce

Honza Bittner:23.3.2013 20:28

popiš (nakresli/screen) co přesně chceš ?

Nahoru Odpovědět

23.3.2013 20:28

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

arkeas93

Člen

arkeas93:23.3.2013 20:52

čarou jsem dokreslil okraje

Nahoru Odpovědět

23.3.2013 20:52

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:27.3.2013 20:40

Pokud jsem to pochopil dobře, tak by se po najetí na ten domeček měl zvětšit.

Dej tam ten větší, ať to není rozmazané. Pomocí CSS mu nastav velikost na tu menší, takže budeš mít velký obrázek zmenšený. Přidej CSS3 animaci a v hoveru na ni odkaž. Je tam jeden problém: když animace skončí tak se to vrátí do původní velikosti, ale to je už detail. Jde to obsloužit JavaScriptem.

Nahoru Odpovědět

27.3.2013 20:40

maxlee

Člen

maxlee:2.4.2013 20:44

png su lubovolne obrazky a pri najeti mysi sa zvecsi. treba skusit.

<img src="speed.png" alt="pozadie" width="650" id="die" />
<ul id="menu3">
<li><a href="#">Home<img src="home.png" id="c" alt=""/></a></li>
<li><a href="#">hudba<img src="mp.png" id="c" alt=""/></a></li>
<li><a href="#">filmy<img src="play.png" id="c" alt=""/></a></li>
<li><a href="#">klik<img src="napster.png" id="c" alt=""/></a></li>
<li><a href="#">preco<img src="default.png" id="c" alt=""/></a></li>
</ul>
#die
{
position: relative;
left: 1px;
top: 1px;
z-index: 1;
}

#menu3
{ position:relative;
left: 50px;
margin-top: -30px;
z-index: 10;

}

#menu3 li
{
width:5px;
height:5px;
float:left;
margin-right:100px;
list-style-type:none;
}

#menu3 a
{
font-style:normal;
font-size:1.0em;
line-height:1.5em;
text-align: center;
text-decoration:none;
color:#000;
text-shadow: -7px -7px 1px gray;
}

#c {
width: 50px;
height:50px;
}

#c:hover {
overflow: hidden;
cursor:pointer;
width: 100px;
height:100px;
}

Nahoru Odpovědět

2.4.2013 20:44

Honza Bittner

Tvůrce

Honza Bittner:3.4.2013 17:16

příště použij vložení kódu .. díky

Nahoru Odpovědět

3.4.2013 17:16

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.