Αλλαγή του opacity ενός div όταν κάνω hover σε ένα άλλο div

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

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

Απάντηση
Άβαταρ μέλους
Mandingueiro
Δημοσιεύσεις: 270
Εγγραφή: 07 Φεβ 2006 19:26

Αλλαγή του opacity ενός div όταν κάνω hover σε ένα άλλο div

Δημοσίευση από Mandingueiro » 02 Δεκ 2011 19:05

Χαιρετώ τους developers! 8)

Έχω 2 divs δίπλα δίπλα, με background image και το καθένα πάνω του έχει κι ένα κουμπί που μάλλον θα το φτιάξω με span. Όταν ο χρήστης κάνει hover στο αριστερό div, θέλω το δεξί να κάνει ενα fade-out, για να επικεντρώνεται ο χρήστης στο αριστερό. (δηλαδή αλλαγή του opacity).

Υποθέτω γίνεται με opacity αυτό και λογικά με jquery σχετικά εύκολα. Επειδή είμαι ψιλοάσχετος με JS όμως, έχετε καμιά ιδέα για το πώς; Παράδειγμα κοιτάξτε στο asos.com στην αρχική, που λέει shop men, shop women, βέβαια εκεί δεν γίνεται fade out αλλά κάπως έτσι θα έχω κι εγώ τα 2 divs. Ένα αριστερά και ένα δεξιά.

Σημείωση: Θέλω να γίνεται και το κουμπί που θα βρίσκεται μέσα στο div, να γίνεται επίσης fade out, εκείνο θα είναι σε span tag μάλλον.

Ευχαριστώ προκαταβολικά!

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

Αλλαγή του opacity ενός div όταν κάνω hover σε ένα άλλο div

Δημοσίευση από burnmind » 03 Δεκ 2011 01:56

Για check αν σου κάνει κάτι σαν κι αυτό: http://burnmind.com/box-focus/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Box focus</title>

<style type="text/css">
body
{
background-color: #000;
}

.container
{
margin: 0 auto;
width: 680px;
}

.box
{
height: 150px;
width: 150px;
background-color: #ffff00;
margin: 10px;
float: left;
cursor: pointer;
}
</style>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.box').hover(function(){
$('.box').clearQueue();
$('.box').not(this).fadeTo('fast', 0.5);
},function(){
$('.box').fadeTo('fast', 1);
});
});
</script>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Το έγραψα στα γρήγορα οπότε δεν το test-αρα. Σε Chrome πάντως παίζει σωστά. Ακόμα και να μη παίζει σωστά στους υπόλοιπους, θα σου δώσει μία ιδέα για έναν τρόπο με τον οποίο γίνεται αυτό που θέλεις.

Άβαταρ μέλους
Mandingueiro
Δημοσιεύσεις: 270
Εγγραφή: 07 Φεβ 2006 19:26

Αλλαγή του opacity ενός div όταν κάνω hover σε ένα άλλο div

Δημοσίευση από Mandingueiro » 19 Δεκ 2011 21:49

Κάτι τέτοιο ψάχνω αλλά σε mootools....

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

Αλλαγή του opacity ενός div όταν κάνω hover σε ένα άλλο div

Δημοσίευση από burnmind » 19 Δεκ 2011 23:51

Ε, τη λογική στην έδωσα. Βρες τις αντίστοιχες functions σε MooTools και δημιούργησέ το. :wink:

Άβαταρ μέλους
Mandingueiro
Δημοσιεύσεις: 270
Εγγραφή: 07 Φεβ 2006 19:26

Αλλαγή του opacity ενός div όταν κάνω hover σε ένα άλλο div

Δημοσίευση από Mandingueiro » 19 Δεκ 2011 23:54

έχω φτάσει σε ικανοποιητικό στάδιο, δουλεύει σε chrome και safari αλλά σε firefox πετάει error:

myElement is not defined

ή

myOtherElement is not defined ανάλογα με το πού κάνω mouse in/mouse out και δεν λειτουργεί φυσικά το εφέ.

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

var el = $&#40;'myElement'&#41;; 
    $&#40;'myElement'&#41;.set&#40;'opacity', 1&#41;.addEvents&#40;&#123;
        mouseenter&#58; function&#40;&#41;&#123;
            myOtherElement.morph&#40;&#123;
              'opacity' &#58; '0.3'
            &#125;&#41;;
        &#125;,
        mouseleave&#58; function&#40;&#41;&#123;
            myOtherElement.morph&#40;&#123;
                  'opacity' &#58; '1'
            &#125;&#41;;
        &#125;
    &#125;&#41;;

    
    var el2 = $&#40;'myOtherElement'&#41;;
    $&#40;'myOtherElement'&#41;.set&#40;'opacity', 1&#41;.addEvents&#40;&#123;
        mouseenter&#58; function&#40;&#41;&#123;
            myElement.morph&#40;&#123;
                     'opacity' &#58; '0.3'
            &#125;&#41;;
        &#125;,
        mouseleave&#58; function&#40;&#41;&#123;
            myElement.morph&#40;&#123;
                  'opacity' &#58; '1'
            &#125;&#41;;
        &#125;
    &#125;&#41;;

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

Αλλαγή του opacity ενός div όταν κάνω hover σε ένα άλλο div

Δημοσίευση από burnmind » 20 Δεκ 2011 00:41

Δεν έχω χρησιμοποιήσει ποτέ MooTools για να μπορώ να σε βοηθήσω.

Πάντως, στον κώδικα που έδωσες τα el & el2 δε τα χρησιμοποιείς πουθενά. Ούτε έχεις δηλώσει πουθενά τα myOtherElement & myElement.

Επίσης, αν μοιάζει με τη jQuery, θα έπρεπε το $('myElement') να περιέχει μία τελεία (".") ($('.myElement')) που δηλώνει πως το myElement είναι όνομα class, ή μία δίεση ("#") που δηλώνει το id ενός συγκεκριμένου element.[/code]

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

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