A jak to osiągnąć aby działał dopiero po najechaniu kursorem?
Na razie osiągnąłem taki efekt. Po najechaniu znika mi tło.
http://intergrupa1.home.pl/autoinstalator/wordpress39/
Kod jaki zastosowałem poniżej:
div.horbar1:hover{
background: url(/autoinstalator/wordpress39/wp-content/uploads/2011/08/header-hover.gif) no-repeat top left;
}
Tło znika ponieważ obrazek
http://intergrupa1.home.pl/autoinstalator/wordpress39/wp-content/uploads/2011/08/header-hover.gif
ma przezroczyste tło.
U Ciebie na logo.png jest użyty selektor hover dlatego tło znika (najprościej mówiąc w tym przypadku selektor hover powoduje że img logo.png jest zastępowane header-hover.gif).
logo.png ma być osobnym div’em który ma przypisany background a w tym div’ie umieść np. a href z selektorem hover z img header-hover.gif.
Powinno to wyglądać mniej więcej tak:
HTML:
<div id="logo">
<a href="adres.pl" id="logo-hover"></a>
</div>
CSS:
#logo{
background: url(.../logo.png);
}
#logo-hover{
}
#logo-hover:hover{
background: url(.../header-hover.gif);
}
Nie bardzo wiem po co to ten środkowy składnik:
#logo-hover{
}
Zrobilem coś takiego ale nie dziala.
div.horbar1 {
<?php bfa_incl('horbar1') ?>
}
div.horbar1-hover{
}
div.horbar1-hover:hover{
background: url(/autoinstalator/wordpress39/wp-content/uploads/2011/08/header-hover.gif) no-repeat top left;
}
div.horbar2 {
<?php bfa_incl('horbar2') ?>
}
Szczerze to nie dziwie się że to nie działa o ile mi wiadomo do css’a nie wstawia się php zastąp to zwykłym background.
#logo-hover{} w typ przypadku faktycznie jest to nie potrzebne, napisałem to po to aby łatwiej zrozumieć strukturę.
Te php-y już tam były . Wrzuciłem ten kod do segmentu odpowiedzialnego za horizontal bar na atahualpie.
Po pierwsze usuń te tabelki i zrób to na divach jak w orginale.
Przy zmianie okna przeglądarki strona się nie ładnie układa a tło się rozjeżdża.
Następnie zastosuj się do takiego układu:
<div id="site_top">
<a id="logo" href="http://www.keller.art.pl"></a>
</div>
dodając jej te reguły:
#site_top {
background: url("/templates/olafkeller/images/header.gif") no-repeat scroll 0 0 transparent;
clear: both;
height: 234px;
width: 100%;
}
#logo:link, #logo:visited {
display: block;
height: 234px;
text-indent: -9999px;
width: 100%;
}
#logo:hover, #logo:active {
background: url("/templates/olafkeller/images/header-hover.gif") no-repeat scroll 0 0 transparent;
}
Nie bardzo wiem po co to ten środkowy składnik:
Nie bujta- przeglądarka to wie za Ciebie 😉
Dziękuję za wszystkie odpowiedzi. Chorowałem przez dwa tygodnie i nie wchodziłem na forum. Muszę sie teraz „przegryźć” przez ostatnie porady.
Pozdrawiam.
