Diskuze: CSS Hover

HTML a CSS HTML a CSS CSS Hover American English version English version

Avatar
arkeas93
Člen
Avatar
arkeas93:

Č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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na arkeas93
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
arkeas93
Člen
Avatar
Odpovídá na Honza Bittner
arkeas93:

č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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na arkeas93
Honza Bittner:

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

Nahoru Odpovědět 23.3.2013 20:28
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
arkeas93
Člen
Avatar
arkeas93:

čarou jsem dokreslil okraje

 
Nahoru Odpovědět 23.3.2013 20:52
Avatar
Odpovídá na arkeas93
Michal Žůrek (misaz):

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  +1 27.3.2013 20:40
Nesnáším {}, proto se jim vyhýbám.
Avatar
maxlee
Člen
Avatar
maxlee:

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>Home<img src="home.png" id="c" alt=""/></li>
<li>hudba<img src="mp.png" id="c" alt=""/></li>
<li>filmy<img src="play.png" id="c" alt=""/></li>
<li>klik<img src="napster.png" id="c" alt=""/></li>
<li>preco<img src="default.png" id="c" alt=""/></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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na maxlee
Honza Bittner:

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

Nahoru Odpovědět 3.4.2013 17:16
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.