css hover και input button

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
PanosIlio
Honorary Member
Δημοσιεύσεις: 2461
Εγγραφή: 20 Σεπ 2005 14:21
Τοποθεσία: Δραπετσώνα
Επικοινωνία:

css hover και input button

Δημοσίευση από PanosIlio » 25 Φεβ 2010 12:19

Καλημέρα,

Το πρόβλημα είναι το εξής, θέλω να μορφοποιήσω ένα asp button που να έχει background-image και όταν είναι σε κατάσταση hover να παίρνει μια ένα άλλο image.

To κουμπί είναι αυτό

Κώδικας: Επιλογή όλων

<asp&#58;Button runat="server" id="Button1"  CssClass="button" ForeColor="White" Height="30px" Width="134px" BorderStyle="None"/>
Έχω δοκιμάσει 2 τρόπους.

Ο ένας:

Κώδικας: Επιλογή όλων

<style  type="text/css">
                .button&#123;
			background-image&#58;url&#40;'Style Library/Images/NINS/efarmoges_button_stage3.png'&#41;;
			background-color&#58; transparent;
			cursor&#58;pointer;	
		&#125;
		input.button&#58;hover&#123;
			background-image&#58;url&#40;'Style Library/Images/NINS/efarmoges_button_over3.png'&#41;;
			background-color&#58; transparent;			
		&#125;
	</style>
και ο άλλος:

Κώδικας: Επιλογή όλων

<style  type="text/css">
                .button &#123;
			background-image&#58;url&#40;'Style Library/Images/NINS/efarmoges_button_stage3.png'&#41;;
			background-color&#58; transparent;
			cursor&#58;pointer;	
		&#125;
		button&#58;hover &#123;
			background-image&#58;url&#40;'Style Library/Images/NINS/efarmoges_button_over3.png'&#41;;
			background-color&#58; transparent;			
		&#125;
	</style>
Και με τους 2 παίζει εξίσου καλά σε firefox αλλά σε ΙΕ αρνείται να κάνει το hover.

Έχω βρει στο google και κάποιους τρόπους με javascript αλλά δεν θέλω να γίνει έτσι, προτιμώ με css.

Αν έχετε καμιά άλλη ιδέα για λύση με css ευπρόσδεκτη.

Ευχαριστώ.
Εικόνα

Friendship often ends in love; but love in friendship - never.

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

css hover και input button

Δημοσίευση από nbc » 25 Φεβ 2010 13:11

Είναι γνωστό το πρόβλημα της ελλειπούς υποστήριξης του button. Είτε ως element είτε ως input type.

Χρησιμοποίησε submit και δεν θα έχεις πρόβλημα. Αν δεν σου κάνει το submit, τότε ένα απλό link το οποίο με το κατάλληλο css φαίνεται και συμπεριφέρεται ως button.

Γενικά, συνιστώ να ξεχάσεις οτιδήποτε έχει να κάνει με button. Παρότι, semantically, είναι το κατάλληλο element ή input type, ουδέποτε ήταν cross-browser compatible. Επίσης, δεν προσφέρει κάτι μοναδικό και αναντικατάστατο, που δεν μπορείς να κάνεις με άλλον τρόπο.

Άβαταρ μέλους
PanosIlio
Honorary Member
Δημοσιεύσεις: 2461
Εγγραφή: 20 Σεπ 2005 14:21
Τοποθεσία: Δραπετσώνα
Επικοινωνία:

css hover και input button

Δημοσίευση από PanosIlio » 25 Φεβ 2010 13:50

Το να γίνει link η developer το απέκλεισε, θέλει να περνάει κάποια credentials χρηστών από μία εφαρμογή σε μια άλλη εφαρμογή.

Επίσης μου απέκλεισε και το να γίνει submit καθώς πρέπει να αλλάξει τον κώδικα και δεν το κάνει για να φτιάξει το hover :P

C' est la vie

Ευχαριστώ για την απάντηση πάντως.
Εικόνα

Friendship often ends in love; but love in friendship - never.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

css hover και input button

Δημοσίευση από Basilakis » 25 Φεβ 2010 19:41

PanosIlio έγραψε:Το να γίνει link η developer το απέκλεισε, θέλει να περνάει κάποια credentials χρηστών από μία εφαρμογή σε μια άλλη εφαρμογή.

Επίσης μου απέκλεισε και το να γίνει submit καθώς πρέπει να αλλάξει τον κώδικα και δεν το κάνει για να φτιάξει το hover :P
Τότε απέκλεισε και εσύ το να γίνει το κουμπάκι έτσι...

Άβαταρ μέλους
PanosIlio
Honorary Member
Δημοσιεύσεις: 2461
Εγγραφή: 20 Σεπ 2005 14:21
Τοποθεσία: Δραπετσώνα
Επικοινωνία:

css hover και input button

Δημοσίευση από PanosIlio » 26 Φεβ 2010 10:00

Basilakis έγραψε: Τότε απέκλεισε και εσύ το να γίνει το κουμπάκι έτσι...
LOL :lol:

Θα μπορούσα, όμως αν σκεφτόμουν και εγώ έτσι δεν κάναμε δουλειά και θα μέναμε με κάτι άσχημο :wink:

Ας μην έχει hover, ας είναι τουλάχιστον εμφανίσιμο :)
Εικόνα

Friendship often ends in love; but love in friendship - never.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες