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

  • Creatore Discussione Creatore Discussione otto9due
  • Data di inizio Data di inizio

otto9due

Utente Attivo
22 Feb 2014
591
25
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:
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
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