Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 25

Discussione: Testo hover

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    28

    Testo hover

    Ho una serie di tab che si espandono al clik sui quali vorrei un testo overlay hover con sfondo colorato,
    ma se assegno un altro div interno mi perde l'impaginazione.
    Come posso inserire un testo overlay hover con sfondo colorato?

    codice:
    <div class="row">
      <div class="grid" onclick="openTab('b1');" style="background:green;"> <!--- testo overlay hover con sfondo colorato (style="background:green;" non mi serve)--->
          
     <img src="img.jpg" alt="...i" class="grid-thumbnail"> 
      
      </div>

  2. #2
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    28
    Si può fare con jquery senza perdere l'impaginazione e l'apertura degli spazi collassabili?

  3. #3
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,028
    ti ricordo che il crossposting non è consentito, se necessario spostiamo la discussione (anche su richiesta).
    l'altra discussione la chiudiamo.

    in ogni caso la domanda mi sembra troppo generica.
    puoi essere più specifico?

  4. #4
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    28
    Si grazie, si può spostare non credo ci sia possibilità di farlo in html.

    Aggiungo un po' di codice per spiegare la situazione
    QUesto è il tab:

    codice:
    <div class="grid" onclick="openTab('b1');" style="background:#fff;">
        Box 1
      </div>

    questo il codice del tab che si espande:

    codice:
    <div id="b1" class="containerTab" style="display:none;background:#fff">
     <img src="image1.jpg" alt="" class="grid-thumbnail"> 
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 3</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    Questo lo script che lo attiva:

    codice:
    <script>
    function openTab(tabName) {
      var i, x;
      x = document.getElementsByClassName("containerTab");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      document.getElementById(tabName).style.display = "block";
    }
    </script>
    Ultima modifica di he-man; 25-03-2021 a 17:09

  5. #5
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,028
    e cosa vorresti aggiungere?

  6. #6
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    28
    Sto cercando di aggiungere un testo con overlay al passaggio del mouse che non mi scombini i div

  7. #7
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,028
    in che posizione?
    fai un esempio di codice

  8. #8
    Utente di HTML.it
    Registrato dal
    May 2016
    Messaggi
    28
    Mancava del codice nel tab, c'è un'immagine. Dovrebbe essere un classico overlay sull'immagine con sfondo colorato e testo che appare, anche sfruttando alt""

    codice:
    <div class="grid" onclick="openTab('b1');" style="background:#fff;">
        <img src="image1.jpg" alt="" class="grid-thumbnail" /> 
      </div>

  9. #9
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,028
    quindi vorresti far apparire del testo in overlay sull'immagine image1.jpg, giusto?

  10. #10
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,028
    se ho capito bene questo può esserti d'aiuto:
    https://www.w3schools.com/cssref/sel_hover.asp

    esempio per te
    codice:
    span#b1 {
      display: none;
    }
    
    
    img#b1:hover + span#b1 {
      display: block;
    }
    
    
    
    <img src="image1.jpg" alt="" id="b1"  class="grid-thumbnail"  ><span id="b1">aaa</span>
    per le misure poi vedi tu...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.