Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

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

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

Απάντηση
Άβαταρ μέλους
goofakos
Δημοσιεύσεις: 494
Εγγραφή: 18 Απρ 2005 00:05
Τοποθεσία: Somewhere between that riff and the other one.

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από goofakos » 13 Απρ 2006 15:57

Έχω το εξής πρόβλημα:
Έχω ένα div #main. Σ'αυτό, έχω βάλει να κάνει κάποιες ενέργειες όταν περνάει ο κέρσορας απο πάνω του. Το πρόβλημα είναι ότι ενώ οι firefox, opera και netscape εκτελούν κανονικά τις ενέργειες που έχω βάλει ( #main:hover { ... }), ο ΙΕ δεν το δέχεται. Καμία ιδέα για το τι μπορώ να κάνω(αν γίνεται χωρίς να χρησιμοποιήσω javascript) :-? ?
He who asks is a fool for five minutes, but he who does not ask remains a fool forever.

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από milianos » 14 Απρ 2006 14:54

Εδώ τι να σου απαντήσει κάποιος? Γράψε και δυό σειρές κώδικα για να δούμε τι ακριβώς εννοείς. :think: :D

Άβαταρ μέλους
Cue
Δημοσιεύσεις: 19
Εγγραφή: 12 Απρ 2005 17:07
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από Cue » 14 Απρ 2006 15:42

Την Javascript δε βλέπω πως μπορείς να την αποφύγεις.
Αυτό που μπορείς να κάνεις είναι register τα events "onMouseOver", "onMouseout" έτσι ώστε να προσθέτεις ή να αφαιρείς μία κλάσση "hover" στο element.

Στο CSS απλά θα έχεις έναν επιπλέον selector με το "hover" class :)
Εικόνα

Άβαταρ μέλους
goofakos
Δημοσιεύσεις: 494
Εγγραφή: 18 Απρ 2005 00:05
Τοποθεσία: Somewhere between that riff and the other one.

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από goofakos » 14 Απρ 2006 18:07

Αν και νομίζω ήμουν σαφής :oops:

Έχουμε αυτό εδώ, που είναι ένα div με border

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

#main {
	position:absolute;
	left:25px;
	top:176px;
	width:475px;
	height:363px;
	z-index:4;
	overflow: auto;
	border: solid;
	border-width: thin;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-top-color: #FFFFFF;
}
Και βάζουμε και αυτό τον κώδικα έτσι ώστε όταν ο κέρσορας πάει πάνω απο το div να αλλάζει το χρώμα του border

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

#main:hover { border-color: #8DC313; }
Cue ΄μπορείς να μου εξηγήσεις αυτά που είπες :) ?
He who asks is a fool for five minutes, but he who does not ask remains a fool forever.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από ThyClub » 14 Απρ 2006 18:13

Εκτός απο hack δεν μπορείς να κάνεις τίποτα άλλο. Μόνο με javascript ...

Το hack:

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

<a class="hack">
<div id="main"></div>
</a>
Και με CSS:

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

a.hack&#58;hover &#123; 
border-color&#58; #8DC313; 
pointer&#58;none;
&#125;

Δοκίμασε το :wink:

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από sibas » 14 Απρ 2006 18:16

Ωραίος ThyClub δεν το ήξερα αυτό το hack :lol: :lol: :lol:

Άβαταρ μέλους
Cue
Δημοσιεύσεις: 19
Εγγραφή: 12 Απρ 2005 17:07
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από Cue » 14 Απρ 2006 18:39

goofakos έγραψε: Cue ΄μπορείς να μου εξηγήσεις αυτά που είπες :) ?
Στην ουσία χρησιμοποιείς Javascript ναι μεν αλλά απλά για να προσθέτεις/αφαιρείς το class σε κάποιο element.

Έτσι στο "onMouseOver" event προσθέτεις το class που σου δείνει το style για το hover state του tag και στο "onMouseOut" το αφαιρείς.

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

function applyHover&#40;element_id&#41;
&#123;
        theElement = document.getElementById&#40;element_id&#41;;

        theElement.onmouseover=function&#40;&#41; &#123;
                this.className+=" hover";
        &#125;

        theElement.onmouseout=function&#40;&#41; &#123;
                this.className=this.className.replace&#40;" hover", ""&#41;;
        &#125;
&#125;
Εικόνα

Άβαταρ μέλους
goofakos
Δημοσιεύσεις: 494
Εγγραφή: 18 Απρ 2005 00:05
Τοποθεσία: Somewhere between that riff and the other one.

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από goofakos » 14 Απρ 2006 21:06

ThyClub: Μόνο στον IE δεν έπιασε αυτό που μου έδωσες.

Cue: δεν έπιασε ούτε το δικό σου

:-?

Σας ευχαριστώ και τους 2
He who asks is a fool for five minutes, but he who does not ask remains a fool forever.

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από milianos » 14 Απρ 2006 21:50

Εδω μια απλή εκδοχή και απο εμένα.

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

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
<title>onmouseover και border</title>
<style type="text/css">
div.normal
&#123;
position&#58;absolute; 
left&#58;25px; 
top&#58;176px; 
width&#58;475px; 
height&#58;363px; 
border-width&#58;1px;
border-style&#58;solid;
border-color&#58;#efefef;
&#125;

div.hover
&#123;
position&#58;absolute; 
left&#58;25px; 
top&#58;176px; 
width&#58;475px; 
height&#58;363px; 
background-color&#58;#efefef;
border-width&#58;5px;
border-style&#58;solid;
border-color&#58;#ff0000;
</style>

</head>

<body>

<div class="normal"
         onmouseover="this.className='hover';"
         onmouseout="this.className='normal';"> 
</div></body>

</html>

Άβαταρ μέλους
Cue
Δημοσιεύσεις: 19
Εγγραφή: 12 Απρ 2005 17:07
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από Cue » 14 Απρ 2006 23:37

goofakos έγραψε:ThyClub: Μόνο στον IE δεν έπιασε αυτό που μου έδωσες.

Cue: δεν έπιασε ούτε το δικό σου

:-?

Σας ευχαριστώ και τους 2
Όταν λές "δεν έπιασε" πως ακριβώς το εννοείς :/
Στην ουσία το ίδιο πράγμα έχει γράψει και ο milianos
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από skeftomilos » 16 Απρ 2006 03:09

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

<!ELEMENT A - - &#40;%inline;&#41;* -&#40;A&#41; -- anchor -->
Σύμφωνα με τα specs τα anchors δε μπορούν να περιέχουν block elements. Πάντως στην πράξη κανείς browser δε φαίνεται να έχει παράπονο.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από cherouvim » 21 Απρ 2006 16:02

live demo @ http://temp.cherouvim.com/forums/ie-hover/

me kodika apo to [google]suckerfish[/google]

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από ThyClub » 21 Απρ 2006 16:21

<script type='text/javascript' src='hover.js'></script>
Νόμιζα οτι δεν ήθελε js :-?

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Πώς να κάνω τον IE να καταλαβαίνει το :hover σε divs :S

Δημοσίευση από cherouvim » 21 Απρ 2006 16:31

Ston IE6 den ginete horis javascript. Eiha mia kouventa me ton goofako sto irc prin meres, kai apla eipa na kano post to live demo mou gia na min paei hameno! :)


Απάντηση

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

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

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