CSS: Cursor Ändern, background-Bild

Ich habe ein hintergrund Bild als Teil des Körpers-Klasse in CSS:

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, ändern Sie die body-Klasse.

Den Grund habe ich das Bild im hintergrund ist, dass, wenn das Skript aktiviert ist, der hintergrund-Farbe und die hintergrund-Bild wird sowohl die änderung an genau der gleichen Zeit, und Sie können nicht wählen Sie das Bild aus.

Ist es möglich, dass ich könnte, ändern Sie den cursor-Typ nur im Schwebeflug über dem hintergrund-Bild? Ich verstehe, ich kann

cursor: pointer;

in der Karosserievarianten, aber das macht den cursor über die gesamte Seite.

Können Sie die live-Seite, aktuell,, wo der hintergrund ändert sich, wenn Sie auf eine beliebige Stelle auf der Seite.

Edit: ich habe etwas, das funktioniert für mich jetzt. Ich fügte hinzu, einen zentrierten 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 kann meine eigenen beliebigen Bereich, aber wenn jemand hat eine bessere Lösung ist, lass es mich wissen.

Warum nicht einfach das Hintergrundbild auf ein div auf der Seite zentriert. Dann können Sie den cursor auf die div.
Ich habe etwas ähnliches, aber mit Tabellen hier Das problem ist, dass Sie können wählen Sie das Bild, und wenn Sie klicken Sie schnell genug, können Sie sehen die Maske von dem Bild, weder von, die sehr gut Aussehen. Das ist mir wichtiger als der cursor, ich wollte nur sehen, ob ich könnte beides haben. Danke, obwohl

InformationsquelleAutor paramesis | 2013-02-12

4

Es gibt wirklich keinen zwingenden Grund, um das Bild ein Hintergrundbild. Sie wäre besser gedient werden, indem das Bild in zwei Wrapper (erforderlich zur absoluten Zentrierung vertikal und horizontal unabhängig von der viewport).

Könnte man erweitern Ihre array füllen es mit Objekten, so dass Sie können halten Sie mögliche Werte für das Bild und den Körper Stil. Auf diese Weise können Sie dieselbe Methode verwenden (das array Durchlaufen), um herausgreifen alle änderungen, die Sie möchten, selbst wenn Sie wollten, um weitere änderungen zu einem späteren Zeitpunkt.

Auch, während web-Browser sind ziemlich nachsichtig mit standards, es ist wirklich trivial zu entsprechen, die einfache HTML-5-Anforderungen und noch immer die Funktionalität.

Schließlich, ich ermutige Sie, um zu vermeiden, nenne ich eine "hipster-Codierung". Während es ' s Spaß zu Namen, Funktionen, Variablen, et al mit obskuren Namen erfreuen die wenigen, die das überprüfen der source code, macht es für unnötig stumpfen Sprache und unteren Wartbarkeit. Kurz gesagt, es ist eine schlechte Praxis, auch wenn Sie der einzige Betreuer.

Beobachten eine neue version Ihrer Quelle basierend auf diese Kommentare (mit Einrückung cleanup) 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>

```
- Für die Nachwelt, ich habe die ursprüngliche (aktuelle) source auf pastebin, damit mein Kommentar mehr Sinn macht, sollte der live-Seite ändern: pastebin.ca/2314337
- Ihr Punkt über hipster-Codierung wird auch übernommen.
- Das Problem habe ich mit dieser Methode ist, dass die Hintergrundfarbe und-Bild ändern sich nicht, zu genau der gleichen Zeit, so dass Sie sehen, die Umrisse der png für diesen Bruchteil einer Sekunde. Wie ich bereits in einem anderen Kommentar, das ist mir viel wichtiger als der cursor. Es wird noch mehr bemerkbar, wenn das zweite Bild noch nicht geladen, doch, die ist, warum es ein unsichtbares Bild-Stil-pre-loading, das zweite Bild.
- Außerdem würde ich es bevorzugen, wenn es nicht möglich ist, wählen Sie das Bild durch klicken und ziehen. Wenn es einen Weg gibt, dies zu verhindern und einfrieren der Seite, so dass Grafiken änderungen erscheinen auf exakt die gleiche Zeit, ich würde gerne das Bild aus dem hintergrund, ob meine Methode führt dazu, dass der viewport Probleme. In meiner begrenzten Umfang Verständnis, dass es sich im hintergrund bequem löst beide Probleme. Darüber hinaus werden die unsichtbaren divs Methode ermöglicht es mir, setzen Sie einen beliebigen Bereich. Ich mag die effizientere array, das hält alles gebündelt, vor allem, da ich Plane, weitere Bilder hinzufügen.
InformationsquelleAutor Tohuw

Versuchen, diese

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

Ich fügte hinzu, dass die html. Scheint nicht zu funktionieren. Ich habe auch versucht Körper.soon1.background-image:aktive und Körper.soon1:hover. kein Glück

InformationsquelleAutor Enve

0

Was Sie tun können, ist, setzen Sie die cursor: pointer auf Körper und ändern Sie den cursor auf die childs. Tun so etwas wie dieses: 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;
}
```
- Hmm. Das ist eigentlich das genaue Gegenteil von dem, was ich versuche zu tun, aber es ist gut zu wissen, dass Sie tun können, dass. Danke!
InformationsquelleAutor Chanckjh
0

Etwas wie dies funktionieren sollte:

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

Weitere option ist, um jQuery verwenden, obwohl es kann overkill für diese. Egal, hier ist, was es Aussehen würde:
```
$(document).ready(function(){
    $("#myDiv").hover(function() {
        $(this).css('cursor', 'pointer');
    });
});
```
Check it out hier: http://jsfiddle.net/K5fex/

InformationsquelleAutor gvirav

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.