[css] button Opcje

[pro-mil]

Chcę przy wykorzystaniu diva i css (bez javascript i czegość w stylu this.className) zrobić sobie buttonik. Po najechaniu zmienia się tło, ramka, czcionka. No i właśnie mi nie wychodzi

Przykładowe buttony: (mają być obok siebie)

[HTML] pobierz, plaintext 
<div class="ansbutton"><a href="page1">Tak</a></div>
<div class="ansbutton"><a href="ipage2">Nie</a></div>
[HTML] pobierz, plaintext 

no i niebardzo wychodzi mi css:

[HTML] pobierz, plaintext 
.ansbutton {
display: inline;
border: 1px solid #a3a3a3;
padding: 0 10px 0 20px;
background: #DCDCDC url(img/arr3.gif) repeat-y;
margin-right: 10px;
text-align: center;
font-family: Helvetica, "Arial CE", Tahoma, Georgia;
font-size : 8pt;
color : #4e4e4e;
text-decoration : none;
}
[HTML] pobierz, plaintext 

w tym wypadku czcionka 'TAK' i 'NIE' nie jest brana z .ansbutton tylko z wcześniejszej definicji a {} a tego nie chcę.

nie wiem jak zrobić coś w stylu onmouseover w css.

Kombinowałem tak:

[HTML] pobierz, plaintext 
.ansbutton a:hover{
display: inline;
border: 1px solid #808080;
padding: 0 10px 0 20px;
background: #d4d4d4 url(img/arr3.gif) repeat-y;
margin-right: 10px;
text-align: center;
font-family: Helvetica, "Arial CE", Tahoma, Georgia;
font-size : 8pt;
color : #bf4128;
text-decoration : none;
}
[HTML] pobierz, plaintext 

ale to nie zmienia mi wyglądu diva tylko czcionki co wydaje mi się logiczne ale tego nie chcę.

Kombinowałem i tak:

[HTML] pobierz, plaintext 
.ansbutton a {
display: inline;
border: 1px solid #a3a3a3;
padding: 0 10px 0 20px;
background: #DCDCDC url(img/arr3.gif) repeat-y;
margin-right: 10px;
text-align: center;
font-family: Helvetica, "Arial CE", Tahoma, Georgia;
font-size : 8pt;
color : #4e4e4e;
text-decoration : none;
}
 
.ansbutton a:hover{
display: inline;
border: 1px solid #808080;
padding: 0 10px 0 20px;
background: #d4d4d4 url(img/arr3.gif) repeat-y;
margin-right: 10px;
text-align: center;
font-family: Helvetica, "Arial CE", Tahoma, Georgia;
font-size : 8pt;
color : #bf4128;
text-decoration : none;
}
[HTML] pobierz, plaintext 

no prawie prawie ale display: inline; nie jest brane pod uwagę tak jak i width i height, co także chyba rozumiem .

Uff no nie mam pojecia jak zrobić ten 'kwadracik'. Pomocy

Pozdrawiam
pss. sorki za ew herezje ale css to narazie nie moja mocna strona. Szukałem na googlach ale tam same opisy buttonów zrobionych za pomocą input - tego też nie chcę

[s_w_ir]

Daruj sobie divy tu:

[HTML] pobierz, plaintext 
<a class="ansbutton" href="page1">Tak</a>
    <a class="ansbutton" href="ipage2">Nie</a>
[HTML] pobierz, plaintext 

CSS

[HTML] pobierz, plaintext 
.ansbutton {
border: 1px solid #a3a3a3;
padding: 0 10px 0 20px;
background: #DCDCDC url(img/arr3.gif) repeat-y;
margin-right: 10px;
text-align: center;
font-family: Helvetica, "Arial CE", Tahoma, Georgia;
font-size : 8pt;
color : #4e4e4e;
text-decoration : none;
}
 
.ansbutton:hover{
border: 1px solid #808080;
padding: 0 10px 0 20px;
background: #d4d4d4 url(img/arr3.gif) repeat-y;
margin-right: 10px;
text-align: center;
font-family: Helvetica, "Arial CE", Tahoma, Georgia;
font-size : 8pt;
color : #bf4128;
text-decoration : none;
}
[HTML] pobierz, plaintext 

[cadavre]

Bądź też użyj

Kod

onmouseover="this.className='druga_zamienna klasa_ansbuttona'"

[s_w_ir]

Ja rozumiem że niektóre cechy JS zastępuje się CSS, ale czemu podstawowe cechy CSS zastępować JS?

[pro-mil]

@s_w_ir, właśnie miałem napisać, że darowałem sobie div'y no i w sumie sam poradziłem w identyczny sposób, bo w sumie te div'y na nic są tam potrzebne . Ale i tak dziękuję.

Gdyby człowiek zanim napisze o pomoc pomyślał pare minut/godzin więcej to byłoby tu połowę postów mniej . Ale czesem już nie ma siły jak ja.

Co do unikania JS, moim zdaniem jeśli istnieje wcale niegorsza alternatywa (jak w tym przypadku) to należy zastosować alternatywę .

Pozdrawiam