Πρόβλημα με position:absolute και mouseover effect!!!

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

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

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

Πρόβλημα με position:absolute και mouseover effect!!!

Δημοσίευση από g_p » 18 Νοέμ 2010 14:35

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

έχω πρόβλημα με το mouseover και mouseout σε div που επικαλύπτεται από άλλο div.
Αν παρατηρήσετε το div2 τρεμοπαίζει,"τρέμει" και δεν ξέρω πως να το διορθώσω...κανονικά πρέπει να μην τρεμοσβήνει αλλά να παραμένει σταθερό
Θέλω κάνοντας mouseover στο div1 να εμφανιζεται το δεύτερο div2 και κανόντας mouseout από το div2 και από το div1 να εξαφανίζεται το div2

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

<!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>
<script type="text/javascript">
		function show&#40;id&#41;&#123;
				document.getElementById&#40;id&#41;.style.display = 'block';			
			&#125;
			function hide&#40;id&#41;&#123;
				document.getElementById&#40;id&#41;.style.display = 'none';			
			&#125;
</script>
</head>

<body>
<div id="wrapper" style="border&#58;10px solid blue;">
	<br/><br/><br/><br/><br/><br/>
	<div id="div1" style="background-color&#58;#009966;width&#58;1000px;height&#58;200px;margin&#58;0 auto;" onmouseover="show&#40;'div2'&#41;" onmouseout="hide&#40;'div2'&#41;">
		
	</div>
	<div id="div2" style="background-color&#58;#FFCC00;width&#58;250px;height&#58;500px;position&#58;absolute;top&#58;0px;left&#58;100px;display&#58;none;">
	</div>
</div>
</body>
</html>

ευχαριστώ

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Πρόβλημα με position:absolute και mouseover effect!!!

Δημοσίευση από Khronos » 18 Νοέμ 2010 16:05

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Untitled Document</title> 
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

    var inDiv2 = false;
    $&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
        $&#40;"#div1"&#41;.hover&#40;
            function &#40;&#41; &#123;
                if &#40;!inDiv2&#41; &#123;
                    $&#40;'#div2'&#41;.removeClass&#40;'invisible'&#41;.addClass&#40;'visible'&#41;;
                &#125;
            &#125;,
            function &#40;&#41; &#123;
                if &#40;!inDiv2&#41; &#123;
                    $&#40;'#div2'&#41;.removeClass&#40;'visible'&#41;.addClass&#40;'invisible'&#41;;
                &#125;
            &#125;
        &#41;;

        $&#40;"#div2"&#41;.hover&#40;
            function &#40;&#41; &#123;
                $&#40;'#div2'&#41;.removeClass&#40;'invisible'&#41;.addClass&#40;'visible'&#41;;
                inDiv2 = true;
            &#125;,
            function &#40;&#41; &#123;
                inDiv2 = false;
                $&#40;'#div2'&#41;.removeClass&#40;'visible'&#41;.addClass&#40;'invisible'&#41;;
            &#125;
        &#41;;
    &#125;&#41;
</script> 
<style>
    .visible &#123; display&#58;block; &#125;
    .invisible &#123; display&#58;none; &#125;

    #wrapper &#123; border&#58;10px solid blue; padding&#58;100px 0px 0px 0px; &#125;
    #div1 &#123; background-color&#58;#009966; width&#58;1000px; height&#58;200px; margin&#58;0 auto; &#125;
    #div2 &#123; background-color&#58;#FFCC00; width&#58;250px; height&#58;500px; position&#58;absolute; top&#58;0px; left&#58;100px; &#125;
</style>
</head> 

<body> 
<div id="wrapper"> 
   <div id="div1"></div> 
   <div id="div2" class="invisible"></div> 
</div> 
</body> 
</html> 
Λίγο μπακαλίστικος τρόπος μου φαίνεται αλλά παίζει. Χρησιμοποίησα jquery.

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

Πρόβλημα με position:absolute και mouseover effect!!!

Δημοσίευση από g_p » 18 Νοέμ 2010 23:02

ευχαριστώ για την απάντηση, με βοήθησε πάρα πολύ

Απάντηση

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

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

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