Πρόβλημα στην χρήση javascript

[Εγω ειμαι ρε]

Καλησπέρα σας μετά από το προηγούμενο ποστ που είχα κάνει και την άμεση και αποτελεσματική ανταπόκριση που πήρα και πραγματικά σας ευχαριστώ όλου. Τώρα προέκυψε άλλο ένα θέμα. 

Για να μπορέσω να σας εξηγήσω το πρόβλημα έφτιαξα μια εικόνα.

 

Αρχικά έχω 3 divs (τα κόκκινα) με id = "RedDiv", και 3 BlueDiv που είναι μέσα στις RedDive. Οι BlueDiv έχουν ως προκαθορισμένη τιμή visibility : hidden;

Έχω και 3 elements <b>Hover Me</b>.

 

Έχω είδη βάλει posistion σε relative και absolute κτλ.

 

Το θέμα είναι όταν τοποθετώ το ποντίκι hover ή onMouseOver στο πρώτο "Hover Me" το μπλε div εμφανίζεται σωστά στην πρώτη div.

 

Και θέλω αντίστοιχα όταν κάνω hover στο δεύτερο "Hover me" να εμφανίζει το BlueDiv μέσα στο δεύτερο RedDiv κτλ.. Αλλά τοποθετώντας το ποντίκι στο δεύτερο Hover Me ή στο τρίτο πάλι το BlueDiv εμφανίζεται μόνο στο πρώτο RedDiv.

 

Δυστυχώς επιλέγεται το πρώτο ίδιο ID πάντα, πως μπορώ να λύσω αυτό το θέμα?

Προσπάθησα και με CSS3 με τις ψευδό-κλάσεις :hover αλλά και πάλι επιλέγεται το πρώτο ID στο html αρχείο.

 

 

 

<script>

function ShowMyBlueDiv()

{

 

    $("#extra1").css("visibility", "visible");

 

};

 

function HideMyBlueDiv()

{

 

    $("#extra1").css("visibility", "hidden");

 

};

 

Βέβαια μπορώ να λύσω το πρόβλημα εάν φτιάξω 3 διαφορετικά BlueDivs δηλαδή BlueDiv1, BlueDiv2 και BlueDiv3, αλλά κάτι τέτοιο είναι στατικό και άχρηστο για λύση γιατί τα RedDiv θα είναι αγνώστου πλήθους, μπορεί να είναι 3 ή 4 ή περισσότερα από 4.

 

[warlock9_0]

δεν θες id για το καθένα

δες αυτό http://jsfiddle.net/r3mk31au/

σίγουρα γίνεται και καλύτερα

[Εγω ειμαι ρε]

δεν θες id για το καθένα

δες αυτό http://jsfiddle.net/r3mk31au/

σίγουρα γίνεται και καλύτερα

με σώζεις

[alou]

Μη χρησιμοποιούμε javascript για θέματα που λύνονται απλά με css όμως

.reddiv {background: red; margin: 10px; display:inline-block;}
.reddiv .bluediv {transition:all 0.3s linear 0s;background: blue; margin: 10px;visibility:hidden;}
.reddiv p:hover + .bluediv {visibility:visible}

[satafaka]

Αν τυχόν πρέπει να βάλεις javascript αντί για css που λέει και ο από πάνω, αρκεί να βάλεις ένα ίδιο class στα reddiv και ένα ίδιο class στα bluedin, όσες φορές θέλεις όπως εδώ:

<div class="reddiv"> 
   <div class="bluediv"> </div> 
</div>

και να γράψεις σε jquery

$(document).ready(function() {
   $(".reddin").hover(function() {
      $(this).find(".bluediv").show();   
   },function() {
      $(this).find(".bluediv").hide();
   });
});

Επεξήγηση jquery: Για κάθε element με class reddiv {{ $(".reddin") }}, όταν γίνει hover {{ .hover }}, βρες ένα δικό του {{ $(this) }} child element με class bluediv {{ .find(".bluediv") }} και κάντο show {{ .show(); }} . Στο mouse out κάντο hide.

 

 

[Εγω ειμαι ρε]

Για κάποιο περίεργο λόγο δεν δουλεύει ουτε με μέθοδο της CSS3, αλλά ούτε με jquery.

<div id="wish">
          <div id="extra1" class="bluediv">
            <img src="miniCloud2.png" />
          </div>
    		<div id="cloud" class="one-edge-shadow">
    			<span class='shadow'></span>
    			<p>This is some text</p>
    			<b>Bill</b>
    			<a onMouseOver="hover(this);" onMouseOut="unhover(this);"  class="nice" href="#"><span><img width="23px" src="nice-btn.png" /></span>Nice</a>
			</div>
    	</div>

Θεωρώ ως ReDiv την πρώτη div με id = "wish" και την δεύτερη div με id = "extra1" ως BlueDiv. Δοκίμασα και τους δύο μεθόδους και δεν δούλεψε. 
Θέλω όταν θα γίνεται hover στο <b>Bill</b>, να εμφανίζεται το BlueDiv (όπως το ονομάσαμε εμείς ), αλλά τίποτα. Να σημειωθεί οτι το z-index είναι 500 (max), άρα να γίνεται overlapping με τα layers αδύνατον.

update:

απλά μένει ένα θεμματάκι, μόνο όταν γίνετε hover στο reddiv εμφανίζεται το αντίστοιχο bluediv, αλλά εγώ θέλω να γίνεται στο hover γενικά σε αυτά που είναι μέσα στο <b>...</b> και να εμφανίζεται το bluediv. Έβαλα στο <b class="ClassName">...</b> αλλά και πάλι δεν ανοίγει.

 

Νομίζω το πρόβλημα είναι στον κώδικα της javascript,

 

<script>

 

$( "b" ).hover(

    function() {

        $(this).find(".bluediv").css( "visibility", "visible" );

    }, 

    function() {

        $(this).find(".bluediv").css( "visibility", "hidden" );

    }

);

</script>

 

μίπως αντι για find πρέπει να βάλω κάποια  άλλη συνάρτηση, με το siblings δεν δουλεύει.

[defacer]

$( "b" ).hover(
    function() {
        $(this).closest(".reddiv").find(".bluediv").css( "visibility", "visible" );
    }, 
    function() {
        $(this).closest(".reddiv").find(".bluediv").css( "visibility", "hidden" );
    }
);

Το κατευθείαν css() είναι κακό αλλά αυτή είναι η γενική ιδέα.

[Εγω ειμαι ρε]

 

$( "b" ).hover(
    function() {
        $(this).closest(".reddiv").find(".bluediv").css( "visibility", "visible" );
    }, 
    function() {
        $(this).closest(".reddiv").find(".bluediv").css( "visibility", "hidden" );
    }
);

Το κατευθείαν css() είναι κακό αλλά αυτή είναι η γενική ιδέα.

 

 

σε ευχαριστώ,  ήταν η καταλληλότερη συνάρτηση για αυτήν την περίπτωση.

[alou]

Μια χαρά δουλεύει με CSS και αυτή είναι η σωστή επιλογή, αρκεί να το Site: χρησιμοποιήσεις σωστά .

Ένα παράδειγμα στο codepen:

" data-controller="core.front.core.autosizeiframe" data-embedId='cbd705d6f0e61482f0173d8f5e8c60ec' allowfullscreen=''> ">http://codepen.io/anon/pen/eNZMBo

[defacer]

Με το markup που δίνει στο τελευταίο post δε γίνεται με pure CSS εφόσον το trigger element είναι descendant αυτού που πρέπει να αλλάξει χρώμα.

 

Για pure CSS λύση χρειάζεται CSS4 support οπότε υπομονή