Mouseover che modifichi parametri di due classi diverse

**Ines_88** · 08-04-2017, 13:25

codice:

<script>
$(document).ready( 
   function(){ 
   $(".project img").mouseover( 
   function(){ 
   $(this).animate({ opacity: '0.65' }, 300); 
   $(".text-box").animate({ opacity: '1' }, 300);
}) 


$(".project img").mouseout( 
   function(){ 
   $(this).animate({ opacity: '1' }, 300); 
   $(".text-box").animate({ opacity: '0' }, 300);
   }) 
})
</script>

Ciao a tutti,
spero di essere stata abbastanza chiara nel titolo o di esserlo nella richiesta qua sotto:

ho creato una lista di immagini e al passaggio del mouse sopra un singolo elemento (".project img") voglio che l'opacity cambi e che appaia una caption (".text-box") che ho già posizionato al centro dell'immagine.

Il codice scritto finora modifica corretamente l'opacity della singola immagine interessata dal mouseover ma modifica tutte le immagini presenti nella pagina che possiedono la classe ".text-box", e non soltanto quella selezionata.

Non so se il "this" può essere usato per multipli elementi o se sbaglio concettualmente la risoluzione di questo problema, spero sappiate aiutarmi voi e che non sia totalmente fuori strada.

Grazie a tutti quelli che vorranno aiutarmi!

Ines

**lucavizzi** · 08-04-2017, 17:43

Ciao Ines,
Come hai già constatato, l'istruzione

codice:

$(".text-box").animate({ opacity: '1' }, 300);

Applicherà una opacity 1 a *tutte* le istanze della classe text-box.

La soluzione sta proprio nell'utilizzo di *this*, che dovrai utilizzare sia per riferirti all'immagine da rendere visibile (come già fai) che per riferirti al caption.

Supponiamo che questo sia il tuo HTML (Che non hai riportato nel porre il quesito, ahi ahi ahi... )

codice:

<figure class="project">
    <img src="" alt="">
    <figcaption class="text-box">Text</figcaption>
</figure>

Visto che l'evento è associato al tag img, il this nella funzione sarà, appunto, un riferimento al tag img.
Per localizzare il giusto caption, farò sempre riferimento al this, ma risalirò al caption per mezzo del parent (contenitore) del tag img.

codice:

$(".project img").mouseout( 
   function(){ 
   $(this).animate({ opacity: '1' }, 300);
   var scope=$(this).parents('.project'); //riferimento al nodo padre
   $(".text-box",scope).animate({ opacity: '0' }, 300); //.text-box *nel* nodo padre
   }) 
})

Buon proseguimento.

**Enzo SIMONELLI** · 08-04-2017, 22:58

Conosco solo sommariamente le librerie JQuery etc., ma fortunatamente lucavizzi ti ha già risposto.

In puro Javascript, ti mostro un uso del this con un esempio che già traccerebbe la via per fare quello che ti occorre ma appunto, in puro Javascript:

codice:

<script>
function transform(element){
element.style.opacity="0.4";
}

function repristinate(element){
element.style.opacity="";
}
</script>
<body bgcolor="#6f6">
<img onmouseout="repristinate(this)" onmouseover="transform(this)" src="http://admiral-kolchak.narod.ru/index.files/image786.jpg">
<img onmouseout="repristinate(this)" onmouseover="transform(this)" src="http://admiral-kolchak.narod.ru/index.files/image3791.jpg"><img 
onmouseout="repristinate(this)" onmouseover="transform(this)" src="http://admiral-kolchak.narod.ru/index.files/image1149.jpg">
</body>

Per svilupparlo, bisognerebbe ampliarlo con proprietà di stile "parallele" a style.opacity che non tutti i browser riconoscono.
E poi ovviamente, aggiungere una temporizzazione per l' effetto di animazione.

Poi vedi una "vecchia" cosa di HTML:
Tag IMG in-linea nel codice, lasciano uno spazio come carattere di testo se si va a capo così nel codice:

codice:

<img src="">
<img src="">

e allora se occorreva evitarlo, si andava a capo così:

codice:

<img src=""><img 
src="">

**Ines_88** · 09-04-2017, 10:44

Ciao Luca, grazie mille per la tua risposta!!!
Non conoscevo questo utilizzo del This, in effetti non conosco molto il javascript e le guide che avevo consultato mostravano altri millemila modi di utilizzarlo.

Risolto questo problema però mi sono accorta subito di un altro piccolo bug presente: appena passo col mouse sopra l’immagine, il text-box appare correttamente, ma appena arrivo sopra di lui questo scompare

Ho provato a duplicare lo script di prima dedicandolo al text-box ma questo al massimo scompare e riappare, creando un effetto non corretto

Hai ragione, dovevo indicare anche il mio markup, eccolo qui:

codice:

<div class="col-md-6 project">
    <a href="../page/">
        <img src="../img/image.png">
    </a>
    <a href="../page/">
        <div class="text-box">
            <p class="project-title”>Project Title</p>
            <p class="project-desc”>Description</p>
        </div>
    </a>
  </div>

**lucavizzi** · 09-04-2017, 11:13

Originariamente inviata da Ines_88

Ciao Luca, grazie mille per la tua risposta!!!
Non conoscevo questo utilizzo del This, in effetti non conosco molto il javascript e le guide che avevo consultato mostravano altri millemila modi di utilizzarlo.

Risolto questo problema però mi sono accorta subito di un altro piccolo bug presente: appena passo col mouse sopra l’immagine, il text-box appare correttamente, ma appena arrivo sopra di lui questo scompare

Ho provato a duplicare lo script di prima dedicandolo al text-box ma questo al massimo scompare e riappare, creando un effetto non corretto

Hai ragione, dovevo indicare anche il mio markup, eccolo qui:

codice:

<div class="col-md-6 project">
    <a href="../page/">
        <img src="../img/image.png">
    </a>
    <a href="../page/">
        <div class="text-box">
            <p class="project-title”>Project Title</p>
            <p class="project-desc”>Description</p>
        </div>
    </a>
  </div>

Scompare perché applichi gli eventi mouseover/mouseout solo sul tag img, di conseguenza, quando il mouse si sposta sul caption, scatta l'evento mouseout applicato all'immagine.

Conviene applicare gli eventi hover direttamente alla classe project e poi riferirsi agli elementi al suo interno.

codice:

$(".project").mouseout( 
   function(){
        var scope=$(this);// elemento con classe project oggetto dell'evento.
        $('img',scope).animate({ opacity: '1' }, 300); //opacity dell'immagine nel nostro .project
        $(".text-box",scope).animate({ opacity: '0' }, 300); //.text-box "figlio" del .project
   }) 
})

**Ines_88** · 09-04-2017, 11:45

In effetti suona più logico quello che dici

Appena sono al mio pc stasera provo immediatamente e ti faccio sapere!

**lucavizzi** · 09-04-2017, 12:29

Originariamente inviata da Ines_88

In effetti suona più logico quello che dici

Appena sono al mio pc stasera provo immediatamente e ti faccio sapere!

Potresti ottenere lo stesso risultato anche utilizzando solo i CSS.

codice:

.project img, .project .text-box{
 transition: all 0.5s ease;
}
.project .text-box{
 opacity:0;
}

.project:hover .text-box{
 opacity:1;
}
.project:hover img{
 opacity:0.65;
}

**Ines_88** · 10-04-2017, 09:04

Sì, hai ragione, ma mi interessava comunque l'utilizzo multiplo del this, e grazie a te ho conosciuto questo misterioso "scope"

Grazie mille, alla prossima!!!

**Ines_88** · 10-04-2017, 09:06

Grazie anche a te, Enzo! Vedere quant'è complesso il "puro Javascript" mi fa apprezzare ancora di più l'utilizzo del Jquery!

Discussione: Mouseover che modifichi parametri di due classi diverse

Strumenti discussione

Ricerca discussione

Visualizza

Mouseover che modifichi parametri di due classi diverse

Tag per questa discussione

Permessi di invio