CSS: Ändern Sie Cursor über Hintergrund-Bild

Ich habe ein Hintergrundbild als Teil eines Körpers Klasse in CSS:CSS: Ändern Sie Cursor über Hintergrund-Bild

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

Dann später habe ich eine Javascript-Funktion, die den Körper Klasse ändern.

Der Grund, dass ich das Bild im Hintergrund habe, ist, dass wenn das Skript aktiviert wird, die Hintergrundfarbe und das Hintergrundbild sich beide zur exakt gleichen Zeit ändern und du das Bild nicht auswählen kannst.

Ist es möglich, dass ich den Cursortyp nur ändern kann, während ich den Mauszeiger über das Hintergrundbild halte? Ich verstehe, dass ich setzen kann

cursor: pointer;

in den Körperarten, aber das macht den Cursor über die gesamte Seite erscheinen.

Sie können die live page, currently, anzeigen, wo sich der Hintergrund ändert, wenn Sie irgendwo auf die Seite klicken.

Edit: Ich habe etwas, das für mich jetzt funktioniert. Ich fügte hinzu, eine zentrierte div mit nichts drin:

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

Dies funktioniert für mich, weil ich meinen eigenen beliebigen Bereich einstellen kann, aber wenn jemand eine bessere Lösung hat, lassen Sie es mich wissen.

Quelle

2013-02-12 paramesis

Warum nicht einfach das Hintergrundbild auf ein Div, zentriert auf der Seite. Dann können Sie den Cursor zum div hinzufügen. – Leeish

Ich habe so etwas, aber mit Tabellen [hier] (http://www.paramesis.com/index3.html) Das Problem damit ist, dass Sie das Bild auswählen können und wenn Sie schnell genug klicken, können Sie die sehen Maske des Bildes, von denen beide nicht sehr gut aussehen. Das ist mir wichtiger als der Cursor, ich wollte nur sehen, ob ich beides haben könnte. Danke, obwohl – paramesis

Es gibt wirklich keinen zwingenden Grund, das Bild ein Hintergrundbild zu machen. Sie würden besser gedient, indem Sie das Bild in zwei Wrapper (erforderlich, um absolute Zentrierung vertikal und horizontal unabhängig von Ansichtsfenster zu gewährleisten).

Sie können Ihr Array erweitern, indem Sie es mit Objekten füllen, so dass es mögliche Werte für das Bild und den Körperstil enthalten kann. Auf diese Weise können Sie mit derselben Methode (durch das Array blättern) alle gewünschten Änderungen auswählen, auch wenn Sie später weitere Änderungen hinzufügen möchten.

Auch, während Web-Browser mit Standards eher nachsichtig sind, ist es wirklich trivial, den einfachen HTML 5-Anforderungen zu entsprechen und trotzdem die Funktionalität zu behalten.

Schließlich ermutige ich Sie stark zu vermeiden, was ich "Hipster-Codierung" nenne. Während es Spaß macht, Funktionen, Variablen, und andere mit obskuren Namen zu nennen, um die wenigen zu erfreuen, die den Quellcode überprüfen, sorgt es für unnötig unnötige Sprache und geringere Wartbarkeit. Kurz gesagt, es ist eine schlechte Übung, auch wenn Sie der einzige Betreuer sind.

Beobachten Sie eine neue Version Ihrer Quelle basierend auf diesen Kommentaren (mit Einzug-Bereinigung) unten.

<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. -->

Quelle

2013-02-16 04:07:31 Tohuw

Für die Nachwelt, habe ich die ursprüngliche (aktuelle) Quelle zu Pastebin gepostet, so dass mein Kommentar mehr Sinn macht, sollte die Live-Seite ändern: http://pastebin.ca/2314337 – Tohuw

Ihr Punkt über Hipster-Codierung ist gut gemacht. – paramesis

Das Problem, das ich mit dieser Methode habe, ist, dass die Hintergrundfarbe und das Bild nicht zur genau gleichen Zeit ändern, so dass Sie den Umriss des PNG für diesen Bruchteil einer Sekunde sehen. Wie ich in einem anderen Kommentar erwähnt habe, ist dies für mich viel wichtiger als der Cursor. Es wird noch auffälliger, wenn das zweite Bild noch nicht geladen ist, weshalb es ein unsichtbares Bild gibt, das das zweite Bild vorlädt. – paramesis

Versuchen Sie, diese

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

Quelle

2013-02-12 22:12:27 Enve

ich dem HTML hinzugefügt habe. Scheint nicht zu funktionieren. Ich habe auch versucht body.soon1.background-image: active und body.soon1: hover. kein Glück – paramesis

Was Sie tun können, ist, die cursor: pointer auf Körper setzen und den Cursor auf der Childs ändern. Haben somthing wie folgt aus: 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; 
}

Quelle

2013-02-12 23:44:51 Chanckjh

Hmm. Das ist eigentlich das genaue Gegenteil von dem, was ich versucht habe, aber es ist gut zu wissen, dass du das tun kannst. Vielen Dank! – paramesis

So etwas sollte funktionieren:

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

Eine weitere Option ist jQuery zu verwenden, obwohl es dafür vielleicht übertrieben ist. Egal, hier ist, was es würde so aussehen:

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

es hier ansehen: http://jsfiddle.net/K5fex/

Quelle

2013-02-12 23:59:07 gvirav

CSS: Ändern Sie Cursor über Hintergrund-Bild

Antwort

Verwandte Themen