CSS: Cambia cursore background-image

sopra ho un immagine di sfondo come parte di una classe corpo in CSS:CSS: Cambia cursore background-image

body.soon1 { 
    background-color: white; 
    background-image: url(soon1a.png); 
    background-position: center; 
    background-repeat: no-repeat; 
}

poi in seguito ho una funzione javascript che cambierà la classe corpo.

La ragione per cui ho l'immagine sullo sfondo è che quando lo script si attiva, il background-color e l'immagine di sfondo saranno sia il cambiamento esattamente nello stesso tempo e non è possibile selezionare l'immagine.

E 'possibile che io possa cambiare il tipo di cursore solo mentre si libra sopra l'immagine di sfondo? Capisco posso mettere

cursor: pointer;

negli stili del corpo, ma questo fa apparire il cursore sopra l'intera pagina.

È possibile visualizzare il live page, currently, in cui lo sfondo cambia quando si fa clic in qualsiasi punto della pagina.

Edit: Ho qualcosa che funziona per me ora. Ho aggiunto un div centrato con niente in esso:

div.clickme { 
width:300px; 
height:400px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-150px 0 0 -200px; 
cursor: pointer; 
}

Questo funziona per me, perché posso impostare la mia propria area arbitraria, ma se qualcuno ha una soluzione migliore, fatemelo sapere.

fonte

2013-02-12 paramesis

Perché non basta mettere l'immagine di sfondo su un div, centrato sulla pagina. Quindi puoi aggiungere il cursore sul div. – Leeish

Ho qualcosa del genere, ma con le tabelle [qui] (http://www.paramesis.com/index3.html) Il problema è che puoi selezionare l'immagine e se fai clic abbastanza velocemente, puoi vedere il maschera dell'immagine, nessuna delle due sembra molto buona. Per me è più importante del cursore, volevo solo vedere se potevo avere entrambi. Grazie, anche se – paramesis

Non c'è davvero alcun motivo valido per rendere l'immagine di un'immagine di sfondo. Sarebbe meglio servire inserendo l'immagine in due wrapper (necessari per garantire il centraggio assoluto verticale e orizzontale indipendentemente dal viewport).

Si potrebbe estendere il vostro array popolato con gli oggetti, in modo che possa contenere valori possibili per l'immagine e lo stile del corpo. In questo modo, è possibile utilizzare lo stesso metodo (ciclo attraverso l'array) di individuare tutte le modifiche desiderate, anche se si voleva aggiungere altre modifiche in seguito.

Inoltre, mentre i browser web sono piuttosto indulgenti con gli standard, è davvero banale conformarsi alle semplici HTML 5 requisiti e ancora mantenere la funzionalità.

Infine, ti consiglio vivamente di evitare ciò che chiamo "codifica dei pantaloni a vita bassa". Mentre è divertente nominare funzioni, variabili, e altri con nomi oscuri per deliziare i pochi che controllano il codice sorgente, rende il linguaggio inutilmente ottuso e la manutenibilità ridotta. In breve, è una cattiva pratica, anche se sei l'unico manutentore.

Osservare una nuova versione dell'origine in base a questi commenti (con pulizia dell'indentazione) di seguito.

<html> 
<head> 
    <title>Something Amazing Will Happen</title> 
    <style type="text/css"> 
     body.light { 
      background-color: white; 
     } 
     body.dark { 
      background-color: black; 
     } 
     div.outside-wrapper { 
      position: absolute; 
      top: 50%; 
      width: 100%; 
      height: 1px; 
      overflow: visible; 
     } 
     div.inside-wrapper { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      width: 381px; 
      height: 393px; 
      margin: -197px 0 0 -191px; 
      cursor: pointer; 
     } 
    </style> 
    <script type="text/javascript"> 
     styleIndex = 0; 
     var states = [{style: "light", image: "soon1a.png"}, {style: "dark", image: "soon2a.png"}]; 
     function nextStyle() { 
      if (++styleIndex >= states.length) 
       styleIndex = 0; 
      var state = states[styleIndex]; 
      document.body.className = state.style; 
      document.getElementById("clickme").src = state.image; 
     } 
     var tap = true; 
     document.addEventListener('touchstart',function(e) { 
      tap = true; 
     }); 
     document.addEventListener('click',function(e) { 
      nextStyle() 
      tap = false; 
     }); 
     document.addEventListener('touchmove',function(e) { 
      tap = false; 
     }); 
     document.addEventListener('touchend',function(e) { 
      if(tap) 
       nextStyle(); 
     }); 
    </script> 
</head> 
<body class="light"> 
    <div class="outside-wrapper"> 
     <div class="inside-wrapper"> 
     <img src="soon1a.png" id="clickme"> 
     </div> 
    </div> 
</body> 
</html> 
<!-- Don't ask me what it is. -->

fonte

2013-02-16 04:07:31 Tohuw

Per i posteri, ho postato la sorgente originale (corrente) su pastebin, quindi il mio commento ha più senso se la pagina in diretta cambia: http://pastebin.ca/2314337 – Tohuw

Il tuo punto sulla codifica dei caratteri a vita bassa è ben preso. – paramesis

Il problema che ho con questo metodo è che il colore di sfondo e l'immagine non cambiano esattamente nello stesso momento, in modo da vedere il contorno del png per quella frazione di secondo. Come ho menzionato in un altro commento, per me è molto più importante del cursore. Diventa ancora più evidente quando la seconda immagine non è ancora stata caricata, motivo per cui c'è uno stile di immagine invisibile che precarica la seconda immagine. – paramesis

Prova questa

body.soon1 { 
    background-color: white; 
    background-image: url(soon1a.png); 
    background-position: center; 
    background-repeat: no-repeat; 
} 
body.soon1:active{ 
    cursor: pointer; 
}

fonte

2013-02-12 22:12:27 Enve

l'ho aggiunto all'html. Non sembra funzionare. Ho anche provato body.soon1.background-image: active e body.soon1: hover. senza fortuna – paramesis

Che cosa si può fare è, mettere il cursor: pointer sul corpo e cambiare il cursore sulle bambino. Fare somthing come questo: http://jsfiddle.net/HSdH3/

html:

<body> 
    <div></div> 
</body>

css:

body { 
    background: red; 
    width:100%; 
    height: 100%; 
} 
body:hover { 
    cursor: pointer; 
} 
div { 
    width: 300px; 
    height: 300px; 
    margin: 0 auto; 
    background: white; 
} 
div:hover { 
    cursor: auto; 
}

fonte

2013-02-12 23:44:51 Chanckjh

Hmm. In realtà è esattamente l'opposto di quello che stavo cercando di fare, ma è bello sapere che puoi farlo. Grazie! – paramesis

Qualcosa del genere dovrebbe funzionare:

<div id="myDiv" style="cursor: pointer">

Un'altra opzione è quella di utilizzare jQuery, anche se potrebbe essere eccessivo per questo. Indipendentemente da ciò, ecco cosa sarebbe simile:

$(document).ready(function(){ 
    $("#myDiv").hover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
});

verificarlo qui: http://jsfiddle.net/K5fex/

fonte

2013-02-12 23:59:07 gvirav

CSS: Cambia cursore background-image

risposta

Problemi correlati