Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154

    <div> con effetto hover al passaggio del mouse...

    Ciao ciao.
    Coi CSS sono riuscito ad ottenere un bel effettino: ho un piccolo form contenuto in un <div> per l'iscrizione ad una mailing-list. Quando l'utente si posiziona sopra il tasto "iscriviti" per cliccarlo, ecco che mi si visualizza uno <span> che contiene una breve informativa sull'uso che verrà fatto dei dati inseriti (nome ed email). Volevo sapere: è possibile che questo effetto di hover mi si attivi non appena il cursore vada sopra l'intero <div> contenente il form, e non solo sopra il pulsante "iscriviti"? Qua mi dicono che i <div> non supportano l'effetto hover, ma io non mi fido.
    Grazie anticipatamente,
    goat
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  2. #2
    Se magari tu ci postassi il codice che hai utilizzato, magari potremmo adattarlo.

    Comunque, in generale, secondo gli standard CSS, l'hover è applicabile a tutti gli elementi (escludiamo ovviamente head, meta, link e simili). Un browser serio che supporta gli standard, pertanto, applicherà l'hover anche al div (vedi Firefox, Opera e amici). IE, che non è un browser serio :rollo: , lo applica solo agli <a>.

    Si può eventualmente rimediare tramite un piccolo javascript supplettivo che utilizza la tecnica di "attribuzione di classe CSS", ma prima di arrivarci è meglio partire dal codice che hai utilizzato.

  3. #3
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Bene, prima di postare il codice volevo capire 'sta cosa dei <div>.
    Adesso è meglio che mi confronti con gli altri sviluppatori, perchè l'idea di aggiungere altri js non mi piace proprio e... mannaggia a IE!
    Se ci sono risvolti mi faccio risentire.

    Oh, comunque tra un po' posto il codice per ottenere l'effetto hover sul tag <a>, così magari se a qualcuno serve...
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  4. #4
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Breve 'sta riunione... Allora, se riusciamo a dargli l'effetto hover con js sarebbe proprio perfetto. Il suddetto effetto dovrebbe essere associato a <div id="newsletter_input"></div>. Mentre il <div> che contiene lo <span> è li solo per facilitarmi il posizionamento dello stesso. E' l'unico modo che ho trovato per ottenere il comportamento più simile possibile da un browser all'altro.
    E sempre sia lordato IE.
    Di seguito il codice sul file HTML:

    <div id="newsletter_input">
    <form id="form">
    <input name="nome" type="text" value="Nome" onclick="this.value='';" class="input" />
    <input name="email" type="text" value="E-mail" onclick="this.value='';" class="input" />
    <a href="#" class="send">iscriviti
    <div><span>Testo di prova testo di prova</span></div>
    </a>
    </form>
    </div>


    E qui il CSS:

    a.send{
    font-family:Verdana, Helvetica, sans-serif;
    font-size:10px;
    margin-left:15px;
    position:relative;
    color:#333333;
    text-decoration:none;
    }
    a.send:hover{
    background-color:#ffffff;
    }
    a span{
    display:none;
    }
    a:hover span{
    display:block;
    position:absolute;
    margin-top:-200px;
    width:277px;
    border:1px solid #CCCCCC;
    background-color:#F8F8F8;
    color:#666666;
    font-size:10px;
    text-align:left;
    padding:4px;
    }
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  5. #5
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Faccio un UP, anche per chiedere ai moderatori se ritengono di dover spostare la thread nel forum del JavaScript...
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  6. #6
    Ma perchè non vi prendete cinque minuti cinque per fare delle ricerche tra le vecchie discussioni?

    Qui un esempio base:

    codice:
    XHTML
    <div id="notizie">
       <h2>Notizie</h2>
       
    
    
          Vi riportiamo qui le notizie di oggi,
          13 giugno 2006.
       </p>
    </div>
    
    CSS
    #notizie:hover,
    .over
    {
       color:#fff; background-color:#000;
    }
    
    Javascript
    var notizie = document.getElementById('notizie');
    notizie.onmouseover = function()
    {
       this.className = 'over';
    }
    notizie.onmouseout = function()
    {
       this.className = '';
    }
    Prova a facci sapere: è ancora presto e ho parecchio .

    P.S. Il tuo markup contiene vari errori sintattici e manca dei dovuti accorgimenti per l'accessibilità del form. Se hai tempo credo valga la pena dare una sistemata.

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 © 2025 vBulletin Solutions, Inc. All rights reserved.