.hover() perchè non va in questo caso?

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Buongiorno a tutti, ho un dubbio che non riesco a capire solo.
Perchè la parte relativa a .hover() non funziona e mi blocca tutto lo script?
Vorrei cambiare icona sostituendo l'icona tramite il cambio di classe di <i> ma non va.
Ecco la pagina completa.. basta copiarla per testarla.. ( è un semplice pulsante.. )

HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
    <style>
    #scarica-listino{
        padding: 15px 20px;
        border: 2px solid #1a78b7;
        position: relative;
        color: #1a78b7;
        cursor:pointer;
        min-width: 170px;
        max-width: 200px;
      
    }
    #scarica-listino>span{
        display: block;
        margin-left: 25px;
    }
    #scarica-listino>small{
        margin-left: 25px;
    }
    #scarica-listino>i{
        position: absolute;
        left: 12px;
        line-height: 30px;
        font-size: 24px;
        color: #F0700D;
    }
    </style>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#scarica-listino").click(function(e) {
        e.preventDefault();  //stop the browser from following
        window.location.href = 'uploads/file.doc';
        });
    });
   
$(document).ready(function(){   
    $("#scarica-listino").hover( function() {
                $(this).find( "i" ).toggleClass("fa-download fa-check");
            }
        });
    });
    </script>
</head>

<body>
<div id="scarica-listino">
    <i class="fa fa-download" aria-hidden="true"></i>
    <span>Scarica il Listino 2017</span>
    <small>1.2Mb - Pdf</small>
</div>
</body>
</html>

Grazie
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, hai messo una parentesi graffa in più, non serve comunque ripetere due volte il ready sul document.
Puoi fare cosi:
Codice:
<script>
            $(document).ready(function () {
                $("#scarica-listino").click(function (e) {
                    e.preventDefault();  //stop the browser from following
                    window.location.href = 'uploads/file.doc';
                });
                $("#scarica-listino").hover(function () {
                    $(this).find("i").toggleClass("fa-download fa-check");
                });
            });
        </script>
Utilizza la console del browser per individuare gli errori di sintassi javascript.
 
  • Like
Reactions: otto9due

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Hai ragione, non ci avevo pensato alla console..
Ora Funziona!
Grazie comunque per l'aiuto. E' da poco che utilizzo ( imparo ) questo linguaggio.
Per quanto riguarda il doppio
HTML:
 $(document).ready(function () {
avevo fatto una prova per vedere se in quel modo funzionava e l'ho dimenticato :p, avevo capito che ne bastava uno, ora con la tua conferma ne sono certo ;)
A presto e grazie come sempre del tuo aiuto e del tuo tempo.
Saluti.
Giacomo
 
Discussioni simili
Autore Titolo Forum Risposte Data
P modifica colore A Hover link website . WordPress 2
amaranthinemess [HTML] :target e :hover HTML e CSS 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
Sermatth72 [HTML] creare link con colori Hover diversi, possibile? HTML e CSS 6
U Hover su immagine escluso titolo - flexbox Presentati al Forum 0
U [HTML] Hover su immagine escluso titolo - flexbox HTML e CSS 3
S [HTML] Effetto hover in un div HTML e CSS 6
otto9due Lampeggiamento solo su .hover(), inizia ma non riesco a fermarlo! jQuery 2
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
F Problema hover voce di menù Javascript 2
A :hover HTML e CSS 5
M sottomenu all hover su voce contattaci jQuery 2
A Simulazione :hover su touch device Javascript 1
P Hover HTML e CSS 1
Shyson jQuery, togliere css hover jQuery 1
L Effetto hover con jquery jQuery 2
F mappa jquery con effetto hover + fancybox Javascript 1
F Come si chiama questo effetto hover? Javascript 1
H Problema hover img jQuery 6
steak [RISOLTO] Problema con 'a:hover' HTML e CSS 12
Shyson Mettere hover a css in linea HTML e CSS 1
P Effetto a:hover sempre attivo solo se si và su una voce del sottomenu HTML e CSS 1
A Stato di :hover su dispositivi Touch-Screen HTML e CSS 6
P Problema con hover div jQuery 2
A hover impostare bordo HTML e CSS 9
Dexter_90 [AIUTO] Modificare proprieta Css tramite hover con Javascript Javascript 4
Dexter_90 [AIUTO] Modificare proprieta Css tramite hover HTML e CSS 4
S strano comportamento a:hover su immagine HTML e CSS 7
andre9004 Dropdown menu con .hover() jQuery 2
D Eventi: si possono modificare proprietà css di un el. B tramite un hover su un el. A? HTML e CSS 0
S [JQUERY] immagine che resta attiva all'hover jQuery 4
S Usare l'hover jQuery 4
F Arrotondare angoli hover HTML e CSS 3
D attivazione dei suoni all'hover in jQuery jQuery 0
voldemort jquery: live con hover jQuery 1
M Come utilizzare :hover senza documento .css HTML e CSS 4
davide1982 Problema animazione con animate e hover Javascript 4
I CSS - hover HTML e CSS 3
S link e hover con i css HTML e CSS 2
M problema con hover/visited menu HTML e CSS 2
F css: -moz-border-radius e :hover HTML e CSS 0
cerbero a:hover HTML e CSS 4
C Hover Cella HTML e CSS 2
Tommy03 Perchè non si apre una pagina PHP PHP 4
otto9due .detach().appendTo(..) Perchè non funziona? jQuery 1
S [PHP] Perchè con require(tcpdf...) restituisce ora errata? PHP 0
ragazzesexy perchè google non elimina i siti inesistenti? SEO e Posizionamento 2
S [PHP] Perchè non mi esegue la query? PHP 11

Discussioni simili