Πρόβλημα με mouseover, mouseout και div (html,css,jquery), εξαφανίζεται το div ενώ δεν πρέπει

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με mouseover, mouseout και div (html,css,jquery), εξαφανίζεται το div ενώ δεν πρέπει

Δημοσίευση από g_p » 06 Φεβ 2011 15:48

παιδιά γεια σας,

έχω φτιάξει ένα απλό menu με τρεις επιλογές.
κάνοντας mouseover σε κάποιο από τα κουτάκια (Home,News,Announcements)
πρέπει να εμφανίζεται ακριβώς από κάτω το αντίστοιχο div.

Κάνοντας mouseover και mouseout (χρησιμοποιώ το .hover() της jquery) εμφανίζονται και εξαφανίζονται τα divs, οκ με αυτό.
Ποιο είναι όμως το πρόβλημα??
Δεν μπορώ να περάσω το ποντίκι πάνω στα divs γιατί εξαφανίζονται...

π.χ. ας υποθέσουμε ότι κάποιος περνάει το ποντίκι πάνω από το "News".
Εμφανίζεται το γαλάζιο div από κάτω αλλά, δεν μπορεί το ποντίκι να ακουμπήσει το div
γιατί εξαφανίζεται,

Δηλαδή, αν υποθέσουμε ότι το κουτί "News" έχει borders.
θέλω κάνοντας mouseout από border-right,border-left,border-top να εξαφανίζεται το div.
Κάνοντας mouseout από border-bottom να παραμένει και να ΜΗΝ εξαφανίζεται, αυτό γινεται??

τι μπορώ να κάνω για να το διορθώσω αυτό??

παραθέτω τον κώδικα παρακάτω

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

#div_menu&#123;

	border&#58;1px solid green;
	background-color&#58;#009900;
&#125;
	
#menu li&#123;

	display&#58;block;
	float&#58;left;
	border&#58;1px solid blue;
	padding&#58;5px;
	background-color&#58;#006699;
	color&#58;#FFFFFF;
	margin&#58;0px;	
&#125;

#div0&#123;
		
			width&#58;300px;
			position&#58;absolute;
			background-color&#58;#0099FF;
			height&#58;500px;			
			display&#58;none;
&#125;

#div1&#123;
		
			width&#58;300px;
			position&#58;absolute;
			background-color&#58;#99FF33;
			height&#58;500px;
			display&#58;none;
&#125;

#div2&#123;
			position&#58;absolute;
			width&#58;300px;
			background-color&#58;#009999;
			height&#58;500px;
			display&#58;none;
&#125;


</style>

</head>

<body>

<div id="div_menu">
	<ul id="menu">
		<li>Home</li>
    	<li>News</li>
    	<li>Announcements</li>
	</ul>
	<div style="clear&#58;both">
	</div> <!-- div for floating left -->
</div>

<div id="div0">
	Home DIV
</div>

<div id="div1">
	News Div
</div>

<div id="div2">
	Announcements
</div>

<script src="jquery.js"></script>
<script>
	
						
						$&#40;"#div_menu ul li"&#41;.hover&#40;
  													function &#40;&#41; &#123;  
																var li_index = $&#40;this&#41;.index&#40;&#41;;  														
																$&#40;"#div"+li_index&#41;.css&#40;&#123;"display"&#58;"inline"&#125;&#41;
																
  																&#125;,
  													function &#40;&#41; &#123;
																var li_index = $&#40;this&#41;.index&#40;&#41;; 
															    $&#40;"#div"+li_index&#41;.css&#40;&#123;"display"&#58;"none"&#125;&#41;
																
  																&#125;
													&#41;;
						

			
</script>

</body>
</html>
ευχαριστώ

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με mouseover, mouseout και div (html,css,jquery), εξαφανίζεται το div ενώ δεν πρέπει

Δημοσίευση από fafos » 06 Φεβ 2011 18:02

vale ta divs mesa sta antistoixa li.. meta den xreiazetai na vriskeis theseis klp.. kaneis thn emfanish me ena aplo hover:

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

$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
     
    $&#40;'#div_menu ul li'&#41;.hover&#40;
        function &#40;&#41; &#123;
            //show its submenu
            $&#40;'div', this&#41;.slideDown&#40;100&#41;;
 
        &#125;,
        function &#40;&#41; &#123;
            //hide its submenu
            $&#40;'div', this&#41;.slideUp&#40;100&#41;;        
        &#125;
    &#41;;
     
&#125;&#41;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με mouseover, mouseout και div (html,css,jquery), εξαφανίζεται το div ενώ δεν πρέπει

Δημοσίευση από g_p » 06 Φεβ 2011 19:47

Ευχαριστώ για την απάντηση,

εγώ τα έβαλα τα divs μέσα στα αντίστοιχα li, αλλά αυτό είναι σωστό?
Μπορούμε να βάλουμε μέσα σε li ολόκληρα div??

Απλά έχω προβληματιστεί γιατί τα li τα έχω ήδη πειράξει (display:block,float:left κλπ)
Εάν βάλω μέσα στο το li το div, γίνεται ο χαμός, γιατί το div βγαίνει έξω από τα περιθώρια/borders
του li, αυτό δεν είναι πρόβλημα??

π.χ. το div0 για το home, το έβαλα position:absolute,float:left , όρισα top και left για να εμφανίζεται ακριβώς από κάτω από το li "news"
Αυτό θα το κάνω για όλα τα divs, έτσι ώστε να υπάρχει συμμετρία,με position absolute, pixels για ακρίβεια
Απλά προβληματίζομαι με τo floating μέσα στο li, εσύ πώς θα το έκανες float αυτό??
θα το έκανες με τον τρόπο που το σκέφτηκα παραπάνω??

Παραθέτω τον κώδικα μετά τις αλλαγές

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

#div_menu&#123;

	border&#58;1px solid green;
	background-color&#58;#009900;
&#125;
	
#menu li&#123;

	display&#58;block;
	float&#58;left;  
	border&#58;1px solid yellow;
	padding&#58;5px;
	background-color&#58;#006699;
	color&#58;#FFFFFF;
	margin&#58;0px;	
&#125;

#div0&#123;
		
			width&#58;300px;
			position&#58;absolute;  /* NEW */
			top&#58;50px;			/* NEW */
			left&#58;50px;			/* NEW */
			background-color&#58;#0099FF;
			height&#58;500px;			
			display&#58;none;
			float&#58;left;               /* NEW */
&#125;

#div1&#123;
		
			width&#58;300px;
			position&#58;absolute;
			background-color&#58;#99FF33;
			height&#58;500px;
			display&#58;none;
&#125;

#div2&#123;
			position&#58;absolute;
			width&#58;300px;
			background-color&#58;#009999;
			height&#58;500px;
			display&#58;none;
&#125;

</style>

</head>

<body>

<div id="div_menu">
	<ul id="menu">
		<li>Home
        	<div id="div0">
				Home DIV
			</div>        
        </li>
    	<li>News
        	<div id="div1">
				News Div
			</div>
        </li>
    	<li>Announcements
        	<div id="div2">
				Announcements
			</div>
        </li>
	</ul>
	<div style="clear&#58;both">
	</div> <!-- div for floating left -->
</div>

<script src="jquery.js"></script>
<script>
							
/* NEW */
 $&#40;'#div_menu ul li'&#41;.hover&#40; 
        function &#40;&#41; &#123; 
            //show its submenu 
            $&#40;'div', this&#41;.slideDown&#40;100&#41;; 
  
        &#125;, 
        function &#40;&#41; &#123; 
            //hide its submenu 
            $&#40;'div', this&#41;.slideUp&#40;100&#41;;        
        &#125; 
    &#41;; 
/* NEW */

</script>

</body>
</html>


ευχαριστώ και πάλι

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με mouseover, mouseout και div (html,css,jquery), εξαφανίζεται το div ενώ δεν πρέπει

Δημοσίευση από fafos » 06 Φεβ 2011 22:46

den thelei kanena float.. me ligo margin-left ka ligo margin-top to pas opou thes... to mono thema pou exei einai me tous palious browsers tou IE (apo 7 kai kato) opou tha xreiastei na doseis diaforetika margins..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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